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

【问题标题】：Angular 7 SCSS Doesn't Keep CSS Custom PropertiesAngular 7 SCSS 不保留 CSS 自定义属性
【发布时间】：2020-02-27 05:33:11
【问题描述】：

我正在尝试在我的 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

【问题讨论】：

你是在全局样式而不是组件级别做的吗？
理想情况下，我可以在全球范围内使用它们。目前我已经尝试过全局样式表和组件样式
你能在 StackBlitz 上重现它吗？另外，我想您可能会运行某种宠物项目，如果是这样，最好切换到第 8 版（为什么使用过时的）？无论如何，要回答这个问题，我们需要一个 StackBlitz 示例或 GitHub 项目来调查
另外，只是为了尝试 - 尝试将 red 更改为一些十六进制代码
它适用于最新版本。 stackblitz.com/edit/angular-p7h5vv 也许值得删除 node_modules 并运行 npm i 以重新安装 sass 编译器

【解决方案1】：

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

$product: red;

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

background-color: $product;

【讨论】：