How to enable CSS sourcemaps for Angular 6 application?

Question

How do I enable sourcemaps for CSS files in my Angular 6 application?

I\'m defining my styles source code in SCSS files, which are later compiled to CSS by Angular CLI.

Answer 1

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

1) modify angular.json to add --extract-css, in 6.0 this argument is removed from ng serve

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

2) Then change serve->options->browserTarget->project-name:build to project-name:build:serve

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

3) run ng serve --source-map