symfony / webpack-encore: How can I make colors in .scss to come from an ENV var? What caches have to be rebuilt?

Question

I have a project based on on symfony 5 and webpack-encore.

I run multiple instances of the project in production, with different contents. I create a docker image and run many containers off the same image, setting the content via ENV variables that typically configure the database name. No .env.* files involved, just RAM-based ENV vars.

The stylesheet is identical for all the clones. But now I would like to "tune" the base colors of the SASS from which all the color palette is derived from an ENV var.

In my styles/app.scss I do now have this line:

$primary: darken(#428bca, 20%);

1. How could I make #428bca to depend on the runtime docker environment variable that I set when running the container?
2. How can I call an env-var value from the.scss?
3. After changing it, is it enough to run only yarn encore production again? Or do I have to run the php bin/console cache:clear before running the yarn encore ?

Answer 1

You may be able to do it by using the sass-loader's additionalData option. See https://www.npmjs.com/package/sass-loader#additionaldata

You can pass the sass-loader options to Encore.enableSassLoader() , so I guess something like the following in webpack.config.js should create a $main-color SASS variable dynamically from your environment variable.

Encore.enableSassLoader({
  additionalData: "$main-color: " + process.env.MAIN_COLOR + ";",
})

Then in your SASS code, you should be able to do $primary: darken($main-color, 20%);