防止 SCSS 编译 CSS 变量 - Angular-CLI答案

【问题标题】：Prevent SCSS from compiling CSS variables - Angular-CLI防止 SCSS 编译 CSS 变量 - Angular-CLI
【发布时间】：2018-05-16 04:37:45
【问题描述】：

我正在使用 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 仍然没有显示在根目录下。
另外，angular-cli 在<script type="text/css"> 中生成的CSS 在任何地方都没有--brand，它实际上是将CSS 变量编译成#123123 所以输出是：

h1 { 颜色：#123123； }

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

更新

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

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

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

【问题讨论】：

如果你还在属性值中使用$brand而不是var(--brand)，为什么不编译呢？
“但是为了能够使用 SCSS 做到这一点，我需要使用 css-vars mixin” - 这就是你失去我的地方。为什么需要使用 css-vars？
@jhpratt 我期待:root 中的$brand 被编译，但我不希望输出css 显示h1 { color: #123123 } 但实际上显示h1 { color: var(--brand); }，但问题是似乎 SASS 正在将 var(--brand) 编译成 #123123 就好像它是一个 SASS var。
@JonUleis 因为你不能在 SCSS 文件中写入--brand: #123123;，它是无效的。
@zed 这是我所看到的：i.imgur.com/8ZXmhzE.png

标签： css angular sass

【解决方案1】：

您使用的可能是 node-sass 的过时版本，它与 CSS 自定义属性的语法不兼容。

这是您在不使用 css-vars mixin 的情况下使用 Sassmeister 成功编译的示例代码：

【讨论】：