How to use include paths with Vue CLI, when trying to import sass modules? - vue.js

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.