How to use include paths with Vue CLI, when trying to import sass modules?

Question

I'm starting a new project using the Vue CLI, and this is my first time using it.

I'm using a CSS framework (Spectre), which I installed via NPM. I'm now trying to import only parts of it. I have found a way to get it to work, but it's quite cumbersome, and I'd like to find a better way using the includePaths option.

Basically, the whole thing can be summarized like this: I have a *.scss file that looks like this:

@import "./node_modules/spectre.css/src/accordions";
@import "./node_modules/spectre.css/src/avatars";
@import "./node_modules/spectre.css/src/badges";
@import "./node_modules/spectre.css/src/breadcrumbs";
...

and I obviously want to simplify it by removing the ./node_modules/spectre.css/src/ part from all the imports.

In vue.config.js, here's what I have:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        includePaths: [path.resolve(__dirname, 'node_modules/spectre.css/src')]
} } } }

But that doesn't work.

I've looked at the following questions:

• How to @import external SCSS properly with webpack and Vue.js?

• Webpack-simple + vue-cli with SASS - Can't compile?

• Using sass-resources-loader with vue-cli v3.x

But couldn't find an answer, or couldn't figure it out.

Answer 1

The URL transform rules of Vue CLI projects allow using ~ as a path alias into the project's node_modules/, so you could do:

@import "~spectre.css/src/accordions";
@import "~spectre.css/src/avatars";
@import "~spectre.css/src/badges";
@import "~spectre.css/src/breadcrumbs";

No changes to your Vue config is needed.