代码之家 › 专栏 › 技术社区 › laptou

如何在sass和vue js中使用resolve url loader

sass vue.js webpack

0

laptou · 技术社区 · 7 年前

我正在尝试导入 index.css 从中的每个文件夹 src/renderer/res/fonts 所以我可以在我的电子应用程序中使用自定义字体。

src/renderer/res/theme/text.scss文件:

@import "../font/fira-sans/index.css";
@import "../font/clear-sans/index.css";
@import "../font/aileron/index.css";
$font-base: "Fira Sans";
$font-ui: "Clear Sans";
$font-header: "Aileron";

然后我导入 text.scss 从 src/renderer/res/theme/theme.scss ,并导入 theme.scss 从中的Vue JS单个文件组件 src/renderer/component/ :

<style lang="scss">

@import "../res/theme/theme.scss";

// other styles which depend on sass variables defined in the SCSS above

</style>

resolve-url-loader 在我的装载机链中:

    {
        test: /\.scss$/,
        use: [
            "css-hot-loader",
            MiniCssExtractPlugin.loader,
            "css-loader",
            {
                loader: "resolve-url-loader",
                options: {
                    debug: true,
                    root: path.join(__dirname, "src/renderer"),
                }
            },
            "sass-loader"
        ]
    },
    {
        test: /\.vue$/,
        use: {
            loader: "vue-loader",
            options: {
                loaders: {
                    scss: [
                        "vue-style-loader",
                        "css-loader",
                        {
                            loader: "resolve-url-loader",
                            options: {
                                debug: true,
                                root: path.join(__dirname, "src/renderer"),
                            }
                        },
                        "sass-loader"
                    ]
                }
            }
        }
    },

但不管我怎么努力,我总是会犯这样的错误:

./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss& (./node_modules/css loader!)!。/node_modules/vue loader/lib/loaders/stylePostLoader.js!。/节点模块/解析url加载程序??参考——4-3!。/node_modules/sass loader/lib/loader.js!节点!。/src/renderer/component/app.scss?vue&type=style&index=0&lang=scss&) 找不到模块:错误:无法解析“I:\git\Personal”中的“../font/fira sans/index.css” 项目\rain notes\src\renderer\component' @./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss& (./node_modules/css loader!)!。/node_modules/vue loader/lib/loaders/stylePostLoader.js!。/节点模块/解析url加载程序??参考——4-3!。/node_modules/sass loader/lib/loader.js!节点!。/src/renderer/component/app.scss?vue&type=style&index=0&lang=scss&)

我试过用 url()

@导入url(“../font/fira sans/index.css”);

我试过使用平铺:

@导入“~res/font/fira sans/index.css”;

我试过把 .css 扩展,这只会导致 索引.css

错误 ./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss& (./node_modules/css loader!)!。/node_modules/vue loader/lib/loaders/stylePostLoader.js!。/节点模块/解析url加载程序??参考——4-3!。/node_modules/sass loader/lib/loader.js!节点!。/src/renderer/component/app.scss?vue&type=style&index=0&lang=scss&) 找不到模块:错误:无法解析“I:\git\Personal Projects\rain notes\src\renderer\component”中的“./fira sans regular.ttf” @./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss& (./node_modules/css loader!)!。/node_modules/vue loader/lib/loaders/stylePostLoader.js!。/节点模块/解析url加载程序??参考——4-3!。/node_modules/sass loader/lib/loader.js!节点!。/src/renderer/component/app.scss?vue&type=style&index=0&lang=scss&) 8: 95-129年

正确解析我的url?

0 回复 | 直到 7 年前

1

0

nallok 6 年前

尝试使用“~@assets/”或“@assets/”

@import "~@assets/font/fira-sans/index.css";
@import "~@assets/font/clear-sans/index.css";
@import "~@assets/font/aileron/index.css";
$font-base: "Fira Sans";
$font-ui: "Clear Sans";
$font-header: "Aileron";

<style lang="scss">

@import "~@assets/res/theme/theme.scss";

// other styles which depend on sass variables defined in the SCSS above

</style>

从 https://github.com/chrisvfritz/vue-enterprise-boilerplate/issues/125

编辑:

实际上现在正在看。我也遇到过类似的问题,只是使用了“vue样式加载程序”而不是其他加载程序。帮我解决了这个问题。我想你应该为生产和开发做些不同的事情。但现在试着。。。

    {
        test: /\.scss$/,
        use: [
           "vue-style-loader"
        ]
    },
    {
        test: /\.vue$/,
        use: {
            loader: "vue-loader",
            options: {
                loaders: {
                    scss: [
                        "vue-style-loader"
                    ]
                }
            }
        }
    },
    ```

Do you have a vue-loader.conf.js?