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 .scss or .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:
Why does this happen?
- 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 becausenode-sassreplaces it with the real values.
How to fix this issue?
Under the hood of Vue's cli, there is webpack handling all the .vue, .sass, .scss, .js files. Webpack with its plugins does a series of transformations to generate plain html, css and javascript.
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 .vue components.