sass-loader additionalData not working for sass variable [SassError: Undefined variable.]

[matthieunelmes]

I am trying to use process env variables within sass in a React application to set colours.

Freshly create-react-app.

"webpack": "^5.64.4"
"sass": "^1.66.1",
"sass-loader": "^12.3.0",

Ejected from CRA and created a webpack.config.js at the root.

Following documentation from:
https://webpack.js.org/loaders/sass-loader/#string-1

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              additionalData: "$env-color: " + process.env.ENV_COLOR + ";",
            },
          },
        ],
      },
    ],
  },
};

.env contains:
ENV_COLOR='#114598'

App.scss:

  .App-link {
    color: $env-color;
  }

Repo to replicate issue can be found here:
https://github.com/matthieunelmes/webpack-test

[JoshGiacopini]

@matthieunelmes Having the same issue now. Assuming you found a fix for it?