阻止SCSS编译CSS变量 - Angular-CLI

Question

我正在使用Angular5和sass v1.3.2。

我希望能够在运行时更改我的单页应用程序的scss文件中广泛使用的颜色（而不是通过编译新文件）。

颜色在我的_variables.css中全局定义为：

$brand: #123123;

例如用作：

h1 {
    color: $brand;
}

我了解到如果我使用CSS变量，我可以修改颜色，如：

# CSS
:root {
    --brand: #123123
}

#JS
document.documentElement.style.setProperty('--brand', '#456456');
# OR
document.querySelector(':root').style.setProperty('--brand', '#456456');

然而，为了能够使用SCSS，我需要使用css-vars mixin：

$brand: #123123;

:root {
  @include css-vars((
    --brand: #{$brand},
  ));
}

并将其用作：

h1 {
    color: var(--brand);
}

两个问题：

• 实际上，--brand仍未显示在root用户身上。

• 此外，由angular-cli在<script type="text/css">中生成的CSS在任何地方都没有--brand，它实际上是将CSS变量编译为#123123，因此输出为：< / p>

  h1 {     颜色：＃123123; }

关于如何在运行时更改全局颜色的任何想法？或者如何在:root中获取我的CSS然后如何让SASS不能编译它？

更新

正如@JonUleis所示，没有必要使用css-var。现在，变量--brand在:root的DOM中显示。

但是，现在color: var(--brand);行仍未在CSS中显示，h1根本没有颜色样式。

将node-sass更新为4.9.0的最新4.8.3后，效果很好。

Answer 1

您可能已经过时的node-sass版本尚未与CSS自定义属性的语法兼容。

以下是使用Sassmeister成功编译的示例代码，而不使用css-vars mixin：