Question

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

我正在尝试从index.css中的每个文件夹导入src/renderer/res/fonts，以便可以在自己的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";

然后我从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!./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” 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（“ ../ 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?

如何在Sass和Vue JS中使用resolve-url-loader

1 个答案: