要让浏览器调试时能关联到原始SCSS文件，你需要确保angular.json中的源码映射配置正确开启，尤其是针对样式文件的部分。虽然ng serve --source-map理论上应该生效，但有时候项目的默认配置可能覆盖了命令行参数，具体设置步骤如下：

1. 定位项目配置 #

打开angular.json，找到projects下你的目标项目（比如"my-app"），然后进入architect节点，分别检查build和serve的配置。

2. 配置Build阶段的SourceMap #

在architect -> build -> options中，确保sourceMap配置正确：

• 如果是简单的全局开启，直接设为布尔值true（会开启脚本、样式、依赖包的所有源码映射）：

  "build": {
    "options": {
      "sourceMap": true,
      // 其他配置项...
    }
  }
  

• 如果你需要更精细的控制，也可以用对象形式单独指定样式的源码映射开启：

  "build": {
    "options": {
      "sourceMap": {
        "scripts": true,
        "styles": true,
        "vendor": true
      },
      // 其他配置项...
    }
  }
  

  这里的核心是styles: true，它会专门为SCSS编译后的CSS生成对应的源码映射文件。

3. 配置Serve阶段的SourceMap #

同样，在architect -> serve -> options中，也要确保sourceMap设置为true（或包含styles: true的对象）：

"serve": {
  "options": {
    "sourceMap": true,
    // 其他配置项...
  }
}

这一步很关键——ng serve会优先使用serve节点的配置，哪怕build阶段开了源码映射，serve阶段没开也会导致浏览器看不到原始SCSS文件。

4. 验证并重启服务 #

修改完配置后，完全停止当前的ng serve进程，重新执行ng serve（此时可以不用加--source-map，因为配置已经生效）。

之后打开浏览器开发者工具，查看元素样式时，就能看到右侧的源码链接指向原始的.scss文件了。如果之前webpack日志显示生成了sourcemap但浏览器没识别，大概率是缓存问题，重启服务+清空浏览器缓存就能解决。

内容的提问来源于stack exchange，提问作者Slava Fomin II