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);then的后备选项.testclass123也将具有属性background: purple;

我的 Angular 版本是 7.2.7 和 Angular Material 7.3.7

Answer 1

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

$product: red;

然后只有当你需要这样的时候才打电话。

background-color: $product;