In my VueJs project created with the Vue CLI 3.0.4, I am aiming to utilize SCSS variables across all components without the need to import _variables.scss into each one individually. After some research, I found that I can achieve this using sass-resource-loader. However, the existing solutions I came across are outdated and not compatible with vue-loader 15.
To address this issue, I have the following setup inside vue.config.js:
var path = require('path');
module.exports = {
chainWebpack: (config) => {
config.module
.rule('sass')
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
resources: [
path.resolve('./src/scss/config/_variables.scss'),
]
})
}
}
Unfortunately, when running this configuration, I encounter the following error:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Undefined variable: "$brand-color".
in C:\dev\git\vue-typescript-test\src\components\HelloWorld.vue (line 60, column 10)
The $brand-color variable is utilized within the HelloWorld.vue component, indicating that the variables are not being properly included.
I am puzzled by why this setup is not working as expected, considering that I followed the Vue CLI documentation diligently.
To tackle this problem, I referenced a particular answer on StackOverflow at Vue CLI 3 sass-resources-loader - Options.loaders undefined.
Any assistance on this matter would be immensely appreciated.
Thank you!