Angular 7 SCSS不保留CSS自定义属性

Question

我正在尝试在Angular 7应用程序中使用CSS自定义属性，但遇到了一些问题，即从CSS生成的过程会摆脱设置为CSS变量的属性。

SCSS

action=""

内建至：

:root {
  --my-test-var: red;
}

.testclass123 {
  height: 150px;
  background: var(--my-test-var);
}

如果我使用诸如:root { --my-test-var: red; } .testclass123 { height: 150px; } 之类的后备选项，那么var(--my-test-var, purple);也将具有属性.testclass123

我的Angular版本是7.2.7和Angular Material 7.3.7

Answer 1

如果将SCSS用作全局样式，则可以像这样定义颜色。 这是最好的方法。

$product: red;

然后只有在需要时才打电话。

background-color: $product;