SASS is one of the first CSS preprocessors, it was developed in 2006 by Natalie Weizenbaum, Chris Eppstein, and Hampton Catlin. Not only SASS is one of the oldest CSS preprocessors, but it is, also the most popular among web developers.
One of SASS’s coolest feature is the ability to assign values to variables and then re-use it along with the project, the variables can live on a different file and be accessed by
@import './_file-were-variables-were-defined.scss'. This also happens when you choose to use SASS on a Vue based project, but, as long as you access the variables on
.sass files, if you try to access a variable that was defined in a file with these extensions inside a Vuejs component, node-sass will return an error like this:
- In the development execution time, Vuejs components do not have access to any features of SASS stylesheet.
- SASS variables are not CSS variables, which means that after
node-sassprocesses SASS files, the variables will no longer exist in the output file because
node-sassreplaces it with the real values.
The plugin responsible to handle SASS files on webpack is sass-loader, and on its options object it’s possible to pass the
prependData in order to share variables globally. It includes
- Other .sass or .scss files
- Style blocks defined inside Vuejs components.
To add the
prependData option edit the
vue.config.js file located in the root of your vuejs project generated with the Vue cli, if it doesn’t exist you can create one. After that, edit or add the code below:
In the code above are the configurations for the node-sass plugin running on webpack. The
prependData property receives a string with a SASS declaration importing the
sass files where I defined the global variables. After that, you should be able to reference variables inside of your