how to use resolve-url-loader with sass and vue js

Question

First of all, here's my directory structure:

I am trying to import index.css from each of the folders in src/renderer/res/fonts so that I can use custom fonts in my Electron application.

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

I then import text.scss from src/renderer/res/theme/theme.scss, and import theme.scss from a Vue JS single-file component in src/renderer/component/:

<style lang="scss">

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

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

</style>

I have included resolve-url-loader in my loader chain:

    {
        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"
                    ]
                }
            }
        }
    },

And yet regardless of what I try, I consistently get errors like this one:

ERROR in ./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&) Module not found: Error: Can't resolve '../font/fira-sans/index.css' in '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

I've tried wrapping the imports with url():

@import url("../font/fira-sans/index.css");

I've tried using a tilde:

@import "~res/font/fira-sans/index.css";

I've tried removing the .css extension, which just led to resolution errors inside of index.css:

ERROR in ./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&) Module not found: Error: Can't resolve './fira-sans-regular.ttf' in '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&) 8:95-129

Why is this happening? How do I get resolve-url-loader to resolve my URLs correctly?

nallok nallok · Accepted Answer · 2019-06-29T20:02:01

Try using "~@assets/" or "@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";

and

<style lang="scss">

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

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

</style>

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

Edit:

Actually looking at it now. I had a similar issue and instead just used the "vue-style-loader" instead of the other loaders. Which fixed the issue for me. I think you might have to do something different for production vs development. But for now just try...

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

how to use resolve-url-loader with sass and vue js

1 Answers