如何避免将声明变量的媒体查询与Angular CSS minifier合并？

Question

我在CSS中使用媒体查询声明变量，但是当Angular CSS minifier将声明合并在一起时，打破了样式。

有没有办法配置这种行为？

我的CSS是

:root { --grid-max: 94%; }

@media (min-width: 400px) { :root { --grid-max: var(--grid-4); } }

@media (min-width: 500px) { :root { --grid-max: var(--grid-5); } }

@media (min-width: 600px) { :root { --grid-max: var(--grid-6); } }

@media (min-width: 700px) { :root { --grid-max: var(--grid-7); } }

@media (min-width: 800px) { :root { --grid-max: var(--grid-8); } }

@media (min-width: 1200px) { :root { --grid-max: var(--grid-12); } }

精简后的版本如下：

:root {
 --grid-3:273px;
 --grid-4:370px;
 --grid-5:468px;
 --grid-6:565px;
 --grid-7:663px;
 --grid-8:760px;
 --grid-12:1150px;
 --grid-max:94%;
}

minifier计算了变量的值(这不是问题所在)，但它还将所有媒体查询合并到一个语句中，从而改变了原始CSS的行为。

Answer 1

这实际上并没有解决的问题，但这是我目前所采用的变通方法。

在angular.json中，可以将其配置为不进行关于样式的优化，同时仍然优化js。在projects.architect.build.configurations.production.optimization，中，只需将样式设置为false，将脚本设置为true。

          "optimization": {"scripts":  true, "styles":  false},