I have a webpack configuration that I use to bundle a html template starter for creating website themes. I use it for bundling css, js and static assets.

I have recently implemented css custom properties, and while doing so I have run into an issue where the sass outputs 2 declarations with one crossed out, for situations where I have used custom variables.

I have attached an example of the body styling as it currently outputs vs how I would like it.
body-1.png is how the styles appears at the moment within chrome dev tools. I need help to get the output shown in body-2.png instead
body-2.png
body-1.png

I’ve checked the latest version of Sass and the correct syntax for CSS custom properties in my Sass file.
But it didn’t work.