5
After digging through the source code of vue-cli, I figured out that the config just gets passed to sass-loader
options, so the solution was pretty straightforward:
Instead of providing the stylesheet with variables through vue.config.js
as such:
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "~@/styles/main.scss"`,
},
},
},
}
You can provide it directly to sass-loader options in webpack config like this:
module.exports = {
...
module: {
rules: [
...
{
test: /\.(s?c|sa)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: sass,
sassOptions: {
fiber: fibers,
},
prependData: `@import "~/styles/main.scss"`,
},
},
],
}
...
]
}
...
}
or for sass-loader<8.0.0
options: {
implementation: sass,
fiber: fibers,
data: `@import "~/styles/main.scss"`,
},
Source:stackexchange.com