CSS 用 !important 标志定义的变量在 angular 生产模式中消失

Question

我遇到 CSS 变量（使用 var() 语法定义）的问题，当 Angular 项目在生产模式下构建时 !important 标志消失（使用 ng build --prod).具体来说，在我的 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 example demonstrating this issue (that is development version) and here 在为生产构建和部署时的样子。

问题是，谁能给我解释一下为什么会这样？

我可以通过多种方式解决这个问题，例如重新组织样式并删除 !important，或者甚至像这样 border: var(--primary) 1px solid !important 编写 border 样式（很奇怪够了，这很好用），但我想知道为什么会这样，这可能只是一个错误，还是背后有一个普遍的原因？

Answer 1

我在 Angular 回购 here 上创建了一个问题，这似乎是一个错误，将在 Angular v9.

中修复

据我所知，问题似乎出在 CSS optimizer they used, so they switched to a different one 中，而且问题似乎已解决（在 v9 中）。最坏的情况是，这可能会引入一些重大更改，在这种情况下，此修复程序可能无法在 v9 中实现，但没有迹象表明这会发生（目前）。

CSS 用 !important 标志定义的变量在 angular 生产模式中消失

CSS variable defined with !important flag disappears in angular production mode

css

css-variables

angular