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.

Alex Spera · Accepted Answer · 2018-06-06 16:16:52Z

6

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

answered Jun 6, 2018 at 16:16

Alex Spera

8218 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BlackICE Over a year ago

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"

Collectives™ on Stack Overflow

How to enable CSS sourcemaps for Angular 6 application?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related