我有一个CSS变量（使用var()定义的CSS问题），当在生产模式下（使用!important构建Angular项目时，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的示例，演示了此问题（即 development 版本），here是构建 production 时的外观部署。

问题是，有人可以向我解释为什么会这样吗？

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