Symfony 6 & webpack encore：如何使用 scss 文件中的 a.env 变量？

Question

I make a webapp with the framework Symfony (version 6) and I use a common value from my js and scss files. In the futurs, I would like change easly this value, so I set the value in a global variable in the.env file.

Next, I tried to modify my webpack.config.js file for pass the value of the global variable. I guess I must modify the line .enableSassLoader() , but I don't find a doc for show how do that...

How can I pass a variable to my scss?

Thanks for any help !

Answer 1

The (very simple) answers:)

In the webpack.config.js file:

let dotenv = require('dotenv');

const env = dotenv.config();
if (env.error) {
    throw env.error;
}
const foo = env.parsed.foo;

// ...

Encore

// ...

  .enableSassLoader((options)=>{
    options.additionalData = `$faa:${foo};` 
    // don't forget the ;
    // now, the var 'faa' can be used in scss files
  })