Angular 12升级后ng serve报SCSS解析错误、页面404问题求助

架构老林

2026-10-20

问题根因

Angular 12.0.0版本默认开启了关键CSS内联（inlineCritical）优化，dev模式下该功能会直接使用标准CSS解析器处理SCSS文件，而生产构建流程会先完成SCSS到CSS的编译再走优化逻辑，所以会出现ng serve报错、ng build正常的情况。

方案1：关闭inlineCritical优化（最快生效）
修改angular.json配置，在projects.stuff2angular.architect.build.options节点下新增"inlineCritical": false，修改后重启ng serve即可。
示例修改片段：
```
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 原有配置不变，新增以下配置项
    "inlineCritical": false
  }
}
```
方案2：升级Angular 12小版本
该问题是Angular 12.0.0的已知bug，后续12.1及以上稳定版已经修复了该兼容问题，执行以下命令升级即可：
```
ng update @angular/core@12 @angular/cli@12
```
方案3：配置postcss支持SCSS解析
如果需要保留当前版本和inlineCritical优化，可在项目根目录新增postcss.config.js配置文件：
```
module.exports = {
  syntax: 'postcss-scss',
  plugins: []
}
```
之后安装依赖：
```
npm install postcss-scss --save-dev
```
重启ng serve即可生效。