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

Question

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

Answer 1

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.

Answer 2

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');
}