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

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.