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

Question

我正在尝试在我的 Angular 7 应用程序中使用 CSS 自定义属性，但遇到了以下问题:构建到 css 会删除设置为 CSS 变量的属性。

SCSS

: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 也会有属性 background: purple ;

我的 Angular 版本是 7.2.7 和 Angular Material 7.3.7

Answer 1

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

$product: red;

然后只在需要时调用。

background-color: $product;