为何Angular 18项目构建会输出单个组件CSS Source Map？

算力阿峰

2026-6-16

Angular 18生成组件CSS Source Map的原因及关闭方法

为什么会出现这个变化？

Angular CLI在版本迭代中（从10+版本开始逐步调整，到Angular 18时完全默认启用），把组件级样式的Source Map设为默认开启状态。这么做是为了优化开发调试体验：哪怕你用的是纯CSS，也能在浏览器开发者工具里直接定位到样式对应的组件文件，不用在打包后的合并CSS里找对应代码。而你之前用的Angular 8/9，默认是关闭组件级样式Source Map的，只会在全局开启Source Map时生成合并CSS的map文件。

至于Edge DevTools出现404错误，是因为构建后生成的这些.css.map文件要么没部署到服务器，要么路径配置和部署环境不匹配，导致DevTools尝试加载时找不到文件。

如何关闭组件CSS Source Map？

有两种方式可以实现：

临时构建时关闭：
执行构建命令时添加参数，直接关闭所有Source Map（包括JS的）：
```
ng build --source-map=false
```
永久修改配置（推荐）：
打开项目根目录的angular.json，找到对应项目的architect -> build -> options节点，添加或修改sourceMap配置，单独关闭样式的Source Map：
```
"sourceMap": {
  "scripts": true,  // 可按需保留JS的Source Map
  "styles": false,
  "vendor": true    // 按需调整第三方依赖的Source Map
}
```
配置完成后，再执行构建就不会生成单个组件的.css.map文件了。