How to use scss variables to declare css variables?

Question

css

I'm using webpack to build.
I'm trying to collect:

$bg-color: green;
body {
  --background-color: $bg-color;
  background-color: $bg-color;
}

I get:

body {
  --background-color: $bg-color;
  background-color: green; 
}

As you can see, one of the uses of the variable has remained in place. How to fix? webpack 4.6.0 node-sass version "4.9.0" sass-graph version "2.2.4" sass-loader version "7.0.1" $bg-color;

Answer 1

body {
  --background-color: #{$bg-color};
  background-color: $bg-color;
}