Angular12升级后执行ng build --prod报Unexpected '/'错误如何解决

问题核心成因 #

Angular 12 生产构建默认启用了新版CSS优化规则，相比Angular 11的构建逻辑对CSS语法合法性校验更严格，仅开发环境正常、生产构建报错属于CSS压缩校验阶段的典型问题。

排查及修复步骤 #

第一步：定位具体错误代码行 #

临时关闭生产环境的CSS优化，生成可查看的完整编译后CSS文件：

1. 打开项目根目录的angular.json配置文件
2. 依次找到 projects > 你的项目名 > architect > build > configurations > production 节点
3. 修改optimization配置，单独关闭CSS优化：

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

4. 再次执行ng build --prod，此时dist目录下会生成未被清理的完整styles.xxx.css文件，打开文件定位到报错提示的9031行，即可找到带非法/的代码段。

第二步：针对性修复常见问题 #

排查到错误代码后，对照以下常见场景修复即可：

• 移除CSS中的//单行注释：CSS原生仅支持/* */格式的块级注释，旧版构建会自动忽略//注释，Angular 12的CSS优化器会将其识别为普通字符导致解析失败，这是升级场景下最高发的问题
• 修正路径类语法错误：检查url()中的资源路径是否加了引号、是否存在未转义的特殊字符，路径中包含空格、中文、特殊符号时必须用引号包裹
• 排查第三方依赖CSS问题：如果错误代码不属于项目自身编写的CSS，说明是node_modules下的第三方依赖包自带非法CSS，可临时注释对应依赖的CSS引入确认问题，升级到对应依赖的兼容Angular 12的版本即可修复
• 修正预处理器语法问题：如果使用SCSS/LESS等预处理器，检查变量拼接逻辑是否会生成多余的/字符，比如变量拼接时未处理边界导致连续生成/符号

第三步：验证修复结果 #

修复完成后，将angular.json中的optimization.styles改回true，再次执行生产构建确认报错消失即可。

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