Angular 12升级后styles.css前注入样式块破坏响应式问题求助

• 问题根因
  Angular 12 生产环境构建默认开启了inlineCriticalCss优化能力，会自动提取识别到的首屏关键CSS内联到HTML的head中。你遇到的内联样式是该优化逻辑误将第三方样式库（通常是Bootstrap）中的打印全局规则识别为了首屏关键样式。
  本地ng serve走开发模式默认关闭优化能力，因此不会触发该注入逻辑，仅生产构建时复现。
• 解决方案1：直接关闭inlineCriticalCss优化（最快生效）
  打开项目根目录的angular.json配置文件，找到对应项目的构建配置节点，修改生产模式的optimization配置项：

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

修改完成后重新执行ng build即可看到内联样式块不再生成。

• 解决方案2：保留优化能力，修复样式引入逻辑
  你内联样式中出现的body {min-width:992px!important}是Bootstrap打印样式模块的规则，你可以按以下方式调整：
  • 排查全局样式引入，避免全量引入Bootstrap的所有样式，仅引入需要的业务模块样式
  • 给全局打印样式手动加上@media print包裹，避免优化逻辑误判为首屏关键样式
  • 拆分全局样式，将非首屏使用的样式从angular.json的styles数组中移除，改为业务模块内按需引入

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