How to add sass loader for node_modules in vue.config.js

Question

I am trying use sass loader for node modules. But no matter what I try, the following error occurs:

SassError: Can't find stylesheet to import.

My vue.config.js look like this:

module.exports = {
    css: {
        sourceMap: true,
        loaderOptions: {
            scss: {
                prependData: `
          @import "~@/my-node-module/theme/engine.scss"; 
        `
            }
        }
    },
};

Answer 1

Try this, from the docs:

@import "~my-node-module/theme/engine.scss";

The ~ tells Webpack that the import path is not a relative path.

The @ is a Vue CLI 3+ alias for the src directory.

So ~@ is essentially the same as @. Either way, Webpack knows the path is not relative and checks the src directory, and won't find the node module.

The ~ by itself causes Webpack to look elsewhere, usually node_modules.

Project .scss file

If you had a .scss asset in your src > assets > scss directory, for example, you could do this:

@import '@/assets/scss/variables.scss';

Or this:

@import '~@/assets/scss/variables.scss';

Or even this:

@import '~/../src/assets/scss/variables.scss';