在 Angular 生产模式下，使用 !important 标志定义的 CSS 变量会消失。

Question

在使用var()语法定义CSS变量并加上!important标志后，当使用ng build --prod命令构建Angular项目时，遇到了问题。具体来说，在我的scss文件中，有如下代码：

.all-borders {
  border: 3px solid var(--primary) !important;
  // in "development" build this is correctly compiled to:  "border:1px solid var(--primary)!important"
  // in "production" build this is incorrectly compiled to: "border:1px solid!important"
}

.window {
  height: 100px;
  width: 100px;
  background-color: cadetblue;
}

在 html 文件中，我定义了一个简单的 div 元素，如下：

<div class="all-borders window"></div>

当我运行ng serve命令（以dev模式构建）时，我可以看到边框正确地被编译并应用于我的div元素。但是，当以prod模式构建时，我的边框变为黑色，并且我可以在检查器中看到样式已被编译为border: 1px solid!important（请注意var(...)消失了）。

这里是一个stackblitz示例，演示了这个问题（即开发版本），而这里是通过生产构建和部署后的效果。

问题是，有人能解释一下这是为什么吗？

我可以通过多种方式解决这个问题，例如重新组织样式和删除!important，甚至像这样编写border样式：border: var(--primary) 1px solid !important（奇怪的是，这也能正常工作），但我想知道这是为什么，这可能只是一个bug还是背后存在着普遍的原因？

- miselking

---

此外，我只能使用 border 简写属性来重现此问题（因此 border-color: var(--primary)!important 可以正常工作），所以这对我来说越来越像一个 bug... - miselking

你可以尝试将其报告为错误并查看。 - Temani Afif

是的，我本来打算这样做，但首先我想在这里问问，看看是否有其他人遇到过这种问题... - miselking

嘿 @miselking，你应该将你的编辑变成一个答案，因为它是有效的。 - misterManSam

谢谢您的建议，我现在已将其添加为答案。 :) - miselking

Answer 1

我在 Angular 仓库 这里 创建了一个问题，看起来这是一个 bug，并将在 Angular v9 中修复。

从我所了解的情况来看，问题出现在他们使用的 CSS 优化器 上，所以他们切换到了 另一个优化器，似乎问题已经解决（在 v9 中）。最坏的情况是，这可能会引入一些破坏性的变化，如果发生这种情况，这个修复可能不会出现在 v9 中，但目前没有迹象表明会发生这种情况。

- miselking