Angular v11升级至v12后生产构建样式渲染异常问题求助

我之前升级Angular项目时也碰到过一模一样的问题，折腾了好一阵才找到靠谱的解决办法，结合社区经验和官方调整，给你几个具体的方案：

方案1：调整Angular生产构建的样式优化配置 #

Angular 12默认开启了更激进的CSS优化策略，可能误把第三方库的样式当成未使用的代码给摇掉了。你需要修改angular.json里的生产构建配置，关闭关键样式内联的选项：

在projects -> [你的项目名] -> architect -> build -> configurations -> production下，添加或修改optimization字段：

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

关闭inlineCritical后，第三方样式会被正确提取到最终的CSS文件中，不会被遗漏。

方案2：在styles.scss中显式导入第三方样式 #

Angular 12对样式数组的处理逻辑有变化，依赖angular.json里的styles数组导入第三方样式可能会出现问题。建议你把angular.json中的第三方样式条目移除，转而在src/styles.scss顶部显式导入：

// 导入Angular Material主题
@import '@angular/material/prebuilt-themes/indigo-pink.css';
// 导入Bootstrap样式
@import 'bootstrap/dist/css/bootstrap.min.css';
// 导入Material图标字体样式
@import 'material-design-icons-iconfont/dist/material-design-icons.css';

注意：Angular 12不再推荐使用~前缀来引用node_modules里的资源，直接用包路径导入即可，CLI会自动解析。

方案3：确保依赖版本完全兼容 #

Angular Material的版本必须和Angular主版本严格匹配，Bootstrap也要选择和Angular 12兼容的版本。执行以下命令更新依赖：

# 更新Angular Material和CDK到12.x版本
npm install @angular/material@12 @angular/cdk@12 --save
# 安装兼容的Bootstrap版本（比如5.1.x稳定版）
npm install bootstrap@5.1.3 --save

版本不匹配可能导致样式解析异常，这也是容易被忽略的点。

方案4：清理缓存后重新构建 #

有时候旧的构建缓存会导致奇怪的问题，先清理缓存再重新构建试试：

# 清理Angular CLI缓存
ng clean
# 清理npm缓存
npm cache clean --force
# 重新执行生产构建
ng build --configuration production

我当时是用方案2配合方案1解决的问题，你可以按顺序尝试这些方案，应该能解决第三方样式缺失的问题。

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