Sass-loader 不替换变量？

Question

不久前，我制作了一个结合使用 SASS 变量和 CSS 自定义属性的项目。我定义了 Sass 变量，然后使用它们来创建 CSS 自定义属性。一切都很好。现在我试图做同样的事情，使用相同的代码和加载器（Webpack），但它不起作用，我不明白为什么。

我有一个style.scss如下所示的文件：

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

sass-loader当我使用 Webpack 使用,构建我的项目时css-loader，style-loader我得到以下输出：

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

由于某种原因， 被$var1替换为 ，h1但未被替换为--color1。

鉴于我之前这样做没有问题，我预计sass-loader可能是原因。但我降级sass-loader到 6.0.7，它与我在项目中使用的版本相同，但我仍然遇到这个问题。为什么在分配给 时不sass-loader替换？$var1--color1

Answer 1

自定义变量值仅支持内部的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};
}