0👍
Your key problem is that your SCSS variables are not being loaded in the per-component builds. If you’re building using webpack and vue-loader probably the best solution is to set up your default variables as a ‘global’ piece of scss that gets loaded for every compilation. See https://vue-loader.vuejs.org/guide/pre-processors.html#sharing-global-variables
If for example, your variables are in src/_variables.scss
your config would look something like:
module.exports = {
css: {
loaderOptions: {
sass: {
data: '@import "src/variables.scss";'
}
}
}
}
Source:stackexchange.com