如何为Angular 6应用程序启用CSS源图？

Question

如何在Angular 6应用程序中为CSS文件启用源图？

我在SCSS文件中定义我的样式源代码,后来由Angular CLI编译为CSS.但是,在样式调试期间,我无法在浏览器中看到原始源代码.所有样式都指向<style>...</style>块.

我想在调试编译代码时能够看到对原始SCSS文件的引用.

我需要在angular.json文件中设置哪些选项？

---

我试图使用--source-mapCLI参数来ng serve命令,但看起来它并没有影响任何东西.根据webpack编译日志,在两种情况下都会发出源映射文件.

Answer 1

来自https://github.com/angular/angular-cli/issues/9099#issuecomment-388710635

1)修改angular.json以添加--extract-css,在6.0中将此参数从ng服务中删除

 "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
       ---
      },
      "configurations": {
        "production": {
          ---
        },
        "serve": {
          "extractCss": true,
           ---
        }
      }
    },

2)然后将serve-> options-> browserTarget-> project-name:build更改为project-name:build:serve

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "open": true,
        "browserTarget": "<project-name>:build:serve"
      },
      "configurations": {
        "production": {
          ---
        }
      }
    }

3)运行服务--source-map