Change option of sass-loader in vue.config - vue.js

Question

I am confused how to change sass-loader settings using vue.config in this documentation there is a webpack.config but my project doesn't have one and I don't think I should have one because according to this documentation I should use vue.config.
The command vue inspect contains the string loader: 'sass-loader', 8 times so I'm not sure what to change.
My source code is the following:
<style lang="scss">
.some-class {
border-bottom: 100px solid $alert;
}
</style>
Then I would like to adjust the values for webpack using vue.config to:
{
loader: 'sass-loader',
options: {
prependData: '$alert: ' + process.env.ALERT_COLOR + ';',
}
}
I suspect I have to change the following entry (coming from vue inspect):
/* config.module.rule('scss').oneOf('vue-modules') */
{
resourceQuery: /module/,
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false,
implementation: {
run_: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
render: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
renderSync: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
info: 'dart-sass\t1.23.0\t(Sass Compiler)\t[Dart]\ndart2js\t2.5.1\t(Dart Compiler)\t[Dart]',
types: {
Boolean: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
Color: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
List: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
Map: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
Null: function() {
return _call(f, Array.prototype.slice.apply(arguments));
},
Number: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
String: function() {
return _call(f, this, Array.prototype.slice.apply(arguments));
},
Error: function Error() { [native code] }
}
}
}
}
]
}

Answer 1

Reading through the docs you linked I would guess it's something like this:
vue.config.js
module.exports = {
chainWebpack: config => {
const cssRule = config.module.rule('css')
// clear all existing loaders.
// if you don't do this, the loader below will be appended to
// existing loaders of the rule.
cssRule.uses.clear()
// add replacement loader(s)
cssRule
.use('sass-loader')
.loader('sass-loader')
.tap(options => {
// modify the options...
return options
})
}
}
And add the sass options you want were is says modify the options.
It's worth noting that cssRule.uses.clear() will clear the previous CSS rules. Which I think you will need to do otherwise you might have conflicting rules. If you find that it is removing a rule you need, I would add it back manually (the same way you are adding sass.

Answer 2

The following seems to work, in my vue.config
const path = require('path');
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "Theme/_colors.scss";
`,
},
},
},
configureWebpack: {
resolve: {
alias: {
Theme: path.resolve(
__dirname,
`src/themes/${process.env.THEME || 'light'}/`
),
},
},
},
};
In _colors.css I can just set the variables: $alert:red;