angular - 如何为 Angular 6 应用程序启用 CSS 源映射？

Question

如何在我的 Angular 6 应用程序中为 CSS 文件启用源映射？

我在 SCSS 文件中定义我的样式源代码，这些文件稍后会被 Angular CLI 编译成 CSS。但是，在样式调试时，我在浏览器中看不到原始源代码。所有样式都指向 <style>...</style> block 。

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

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

---

我试过使用 --source-map ng serve 的 CLI 参数命令，但看起来它没有影响任何东西。根据 webpack 编译日志，在这两种情况下都会发出源映射文件。

Answer 1

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

1) 修改 angular.json 添加 --extract-css，在 6.0 中这个参数从 ng serve 中移除

 "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) 运行 ng serve --source-map