How can I use environment variables in node-sass .scss files?

user_694325 0
Viewed 4348

I want a configurable default color variable maintained in an .env file. For example I would want an .env file that contains

PRIMARY=red

And a _variables.scss file that contains

$primary: ${process.env.PRIMARY}

And an SCSS file that contains

.my-class { color: $primary; }

And components where I use the stylesheets that contains

import './MyComponent.scss';

Is this possible? If not, what alternatives would I have?

  • node v12.13.1
  • node-sass v4.13.1
node-sass create-react-app
2 Answers

Assuming you are using webpack and sass-loader (you will need to eject, which I think is worth it if you don't mind extra files and more dependency updating), modify your webpack.config.js file like this:

const { castToSass } = require('node-sass-utils');

module.exports = {
...
  {
    test: /\.scss$/,
    use: [{
        loader: "style-loader"
    }, {
        loader: "css-loader"
    }, {
        loader: "sass-loader"
        options: {
          functions: {
            "env($variable)": variable => castToSass(process.env[variable]);
          }
        }
    }]
  }

Now you could make a file _variables.scss like this:

$primary: env('primary');

If this doesn't work or you need more flexibility, check out the article I based it off of and feel free to edit my answer.

user_49590490

Robert's answer was a good clue but it didn't work for me. I spent an hour fixing my Webpack config and I just want to share the result here so no one else wastes their time here.

You should create your function in the sass-loader's sassOptions object like below: (using node-sass-utils is not required)

// Import node-sass at the top of your config file
const nodeSass = require('node-sass');


// Add this object to the sass-loader options object
sassOptions: {
    functions: {
        "env($variable)": variable => {
            const value = variable.getValue();
            const envValue = process.env[value]
            const sassValue = new nodeSass.types.String(envValue); 
            return sassValue;
        }
    }
}

Then you can use any env variables in your SASS files like below:

.my-class {
  color: env('ENV_VAR_NAME');
}
user_44972480
Related