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. However, I can't see the original source code in the browser during styles debugging. All styles are pointing to the <style>...</style> blocks.

I want to be able to see the references to original SCSS files when debugging the compiled code.

What options do I need to set in angular.json file?

---

I've tried to use --source-map CLI argument for ng serve command, but it looks like it's not affecting anything. Sourcemap files are emitted in both cases according to webpack compilation log.

Inscription

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": "<project-name>:build:serve"
      },
      "configurations": {
        "production": {
          ---
        }
      }
    }

3) run ng serve --source-map

Serrato

for me, that build>configurations>serve entire node had to be added. Also you can just look at what the serve>builder>options>browserTarget is using and add the "extractCss": true, to that node under builder instead of using "serve" – Zubkoff