Angular 13生产构建出现Unmatched selector: %警告如何解决

问题根因 #

这个警告是Angular 13.0.x版本的@angular-devkit/build-angular依赖包的已知缺陷，它内置的CSS规则校验逻辑会错误将@keyframes声明里的百分比关键帧识别为无效选择器，你项目中引入的animate.css等包含大量动画定义的第三方依赖会放大这个问题，所以会出现上百条同类警告。

解决方案 #

你可以根据项目情况选择以下任意一种方案解决：

• 方案1（最推荐）：升级@angular-devkit/build-angular到已修复该问题的版本
  官方在13.1.0及以上的小版本中已经修复了这个缺陷，你直接执行以下命令升级依赖即可：

  npm install @angular-devkit/build-angular@13.1.x --save-dev
  

  升级完成后重新执行npm run build，警告就会完全消失，无需修改任何业务代码。
• 方案2（临时兼容，不需要升级依赖）：关闭生产构建的关键CSS内联校验
  如果当前项目暂时不能升级Angular相关依赖，你可以修改angular.json配置，关闭触发该警告的校验逻辑：
  找到projects -> [你的项目名] -> architect -> build -> configurations -> production节点，修改optimization配置如下：

  "optimization": {
    "scripts": true,
    "styles": {
      "minify": true,
      "inlineCritical": false
    },
    "fonts": true
  }
  

  该配置仅关闭关键CSS内联功能和对应的校验逻辑，不会影响其他构建功能和项目的正常运行。

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