如何使用sass和vue js的解析url-加载程序

Question

首先，这是我的目录结构：

​

​

我试图从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，并从src/renderer/component/中的Vue JS单文件组件导入theme.scss。

<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!./node_modules/resolve-url-loader??ref--4-3!./node_modules/sass-loader/lib/loader.js!./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss&)模块中的错误:错误：无法解析‘../字体/fira-sans/index.css’在'I:\git\Personal Projects\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!./node_modules/resolve-url-loader??ref--4-3!./node_modules/sass-loader/lib/loader.js!./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss&) 3:10-92

我试过用url()包装进口产品

@import url(“./sans/fira-sans/index.css”)；

我试过用倾斜器：

@import“~res/字体/fira-sans/index.css”；

我尝试删除.css扩展，这只会导致index.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!./node_modules/resolve-url-loader??ref--4-3!./node_modules/sass-loader/lib/loader.js!./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss&)模块中的错误:错误：无法解析‘./fira-sans-Regar.ttf’中的‘i：\git\个个人项目\下雨-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!./node_modules/resolve-url-loader??ref--4-3!./node_modules/sass-loader/lib/loader.js!./src/renderer/component/app.scss?vue&type=style&index=0&lang=scss&) 8:95-129

为什么会发生这种情况？如何让resolve-url-loader正确地解析我的URL？

Answer 1

尝试使用“~@资产/”或“@资产/”

@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?