A webpack plugin to extract SASS variables from a .scss file and put into a json file to be used in your JS App.

In the project I am working on, we inherit some SASS variables from a styleguide, but all our React Components are using styled-components. We needed to reuse all thoses SASS variables in our StyledComponents.

We were using some npm package to extract sass to js, but that was not updated since 2018... Our company has some security standards which our apps need to follow, and our dependencies have to be up-to-date for

npm install sass-extract-vars-plugin --save-dev or yarn add sass-extract-vars-plugin --dev

In your webpack config file:

...
const SassExtractVarsPlugin = require('sass-extract-vars-plugin');

module.exports = {
    ...
    plugins: [
        new SassExtractVarsPlugin(
        [
            { color: './path/to/file/_colors.scss' },
            { font: './path/to/file/_fonts.scss' },
        ],
        './path/to/folder/to/save/theme.json',
        ),
    ...
    ]
}

When webpack compiles your code, it will create a JSON file with the same format as you provided in the first argument. e.g:

{
    { 
        "color": {
            $firstVar: "#FFF",
            $secondVar: "#CCC"
        } 
    },
    {  
        font: {
            $thirdVar: "12px",
            $forthVar: "14px"
        } 
    },
}
    

and it will save the file in the path you provided as second parameter.

e.g.:

  watchOptions: {
    ignored: '**/path/to/folder/to/save/theme.json',
  },

Finally, you just need to import in your code and use it

e.g.:

import themeVariables from './theme.json';