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

enter image description here

我试图从 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"
                    ]
                }
            }
        }
    },

然而不管我尝试什么，我总是得到像这样的错误：

ERROR在./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'中的'../font/fira-sans/index.css'@ ./src/renderer/组件/ app.scss？VUE＆类型=风格＆索引= 0＆郎= 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 内的解决方案错误：

ERROR在./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＆类型=风格＆索引= 0＆郎= 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 解析我的网址？

webpack vue.js sass