Setting global sass variables in a vue project
Change data to prependData
module.exports = { css: { loaderOptions: { sass: { prependData: ` @import "@/assets/styles/_variables.scss"; ` } } }}You can read more about this here: pre-loader docs
this code is for vue3
install:
Sass
npm install -D sass-loader@^10 sassfibers
npm install -D fibersStyle Resources Loader
npm i style-resources-loader -Din your vue.config.js (root level project)
module.exports = { css: { loaderOptions: { sass: { additionalData: ` @import "@/assets/styles/scss/_variables.scss"; ` } } }}enter image description heresymbol @ means that your file start from src folder
npm install --save-dev node-sass sass-loader- Create file 'vue.config.js' in the root
Add code below. Remember - @ refers to /src folder
module.exports = { css: { loaderOptions: { sass: { data: '@import "@/assets/css/variables/_colors.scss";' } } }}Restart the project