css - 如何避免合并在 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%;
}

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

Answer 1

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

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

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