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

Question

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

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

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";

然后我从src/renderer/res/theme/theme.scss 导入text.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&) 未找到模块：错误：无法解析 '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!./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("../font/fira-sans/index.css");

我尝试过使用波浪号：

@import "~res/font/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&) 未找到模块：错误：无法解析 '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!./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 正确解析我的网址？

Answer 1

尝试使用“~@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-style-loader”而不是其他加载器。这为我解决了这个问题。我认为您可能必须为生产与开发做一些不同的事情。但现在只是尝试...

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