Css Sass加载器不替换变量？

不久前，我做了一个项目，它使用了SASS变量和CSS自定义属性的组合。我定义了我的Sass变量，然后用它们来创建我的CSS自定义属性。一切都很顺利。现在我正试图做完全相同的事情，使用相同的代码和加载程序（网页包），但它不起作用，我不知道为什么

我有一个

style.scss

文件，看起来像这样：

$var1: #ff3344;
h1 { color: $var1; }
:root { --color1: $var1; }

当我使用

sass-loader

、

css-loader

和

style-loader

使用Webpack构建项目时，我得到以下输出：

h1 { color: #ff3344; }
:root { --color1: $var1; }

由于某种原因，

$var1

被替换为

h1

，而不是

--color1

鉴于我之前没有遇到任何问题就这样做了，我认为

sass-loader

可能是原因。但是我将sass-loader降级为6.0.7，这与我在项目中使用的版本相同，但我仍然存在这个问题。为什么

sass加载器在分配给
--color1
时不替换
$var1

自定义变量值仅支持
#{}
中的SassScript

例如，如果您希望拥有颜色数组：

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;
$colors: map-merge((
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
), $colors);

@each $color, $value in $colors {
    --#{$color}: #{$value};
}

你确定这有用吗根{--color1:$var1；}。现有的sass编译器不会转换它。另一方面，它可以工作：根{--color1:{$var1}；}我肯定。下面是我的工作项目中的一些示例代码：
：root{@each$name，$page colors中的color{--color-{$name}:$color；}}
我想使用
{}
可以。但是我不明白为什么我在以前的项目中不必这么做。我有大约100个CSS属性分配给Sass变量，就像上面所说的那样，它工作得很好。这很可能是新版本中的一个bug