Angular12执行ng build --prod生产构建报CSS Minimizer类型错误如何解决

该报错是Angular 12版本升级后，默认启用的CSS压缩工具依赖的postcss-ordered-values插件触发的已知问题。触发根因为项目中存在语法不规范的box-shadow属性声明：可能是业务代码手写的box-shadow少写了偏移量、模糊半径等必填参数，也可能是引入的第三方组件库、公共样式文件中带有不符合W3C规范的box-shadow简写格式，该插件在解析这类不规范样式时出现异常，进而抛出类型错误。

• 修正不规范样式：打开报错提示的样式文件，定位到第6058行对应的box-shadow声明，按照标准语法补全缺失参数，去除不合法的属性值即可解决问题。
• 修复依赖版本问题：postcss-ordered-values的5.1.0及以上版本已经修复了该解析崩溃问题，可执行命令npm install postcss-ordered-values@latest --save-dev升级对应依赖即可。
• 调整构建配置：如果不想修改样式代码，也可以在angular.json的生产构建配置项下调整CSS优化规则，避免触发异常：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "optimization": {
                "styles": {
                  "minify": true,
                  "inlineCritical": false
                }
              }
            }
          }
        }
      }
    }
  }
}

• 临时调试方案：如果需要快速打包验证其他功能，可执行命令ng build --prod --optimization=false临时关闭CSS压缩，该方案仅适合调试使用，不建议用于正式生产环境构建。

内容的提问来源于stack exchange，提问作者Preeti