防止SCS编译CSS变量-Angular CLI

我在sass v1中使用Angular5。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');

然而,要使用SCS做到这一点,我需要使用 css-vars 混合物:

$brand: #123123;

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

并将其用作:

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

两个问题:

• 实际上,还是 --brand 根目录下未显示。

• 此外,在 <script type="text/css"> 通过angular cli没有 --品牌 在任何地方,它实际上都是将CSS变量编译为 #123123 因此,输出为:

  h1{ 颜色:#123123; }

关于如何在运行时更改全局颜色,有什么想法吗?或者如何加入我的CSS :root 那么,如何让SASS不编译它呢?

使现代化

正如@JonUleis所示,没有必要使用 css-var .现在var --品牌 在DOM中显示 :根目录 。

然而,现在 color: var(--brand); 行仍然没有显示在CSS中,并且 h1 根本没有颜色样式。

更新后 node-sass 至最新 4.9.0 从…起 4.8.3