在构建时使用 webpack 将 Scss 变量转换为 css 变量

Question

我正在使用 webpack 在构建期间将我的 scss 变量更改为 css 变量！有什么办法可以做到这一点，以便我可以动态地（自动）而不是手动地将我的 scss 变量替换为 css 变量。

我使用带有正则表达式的 string-replace-loader 在每个文件中进行变异，但没有成功。 我用过字符串插值

$color-black: #000000;

body {
    --color-black: #{$color-black};
}

我想在构建期间将所有 scss 变量更改为如下所示的 css 变量

.dev{
  color:$color-black;
}

到

.dev{
 color: var(--color-black);
}

提前致谢 如果问题重复，请道歉