webpack - How to Source Map Angular CLI css files in Chrome Dev Tools?

Question

Is there a way to source-map styles so that edits made in Chrome Dev Tools can be persisted to a added local Workspace?

Chrome Dev Tools is showing all my styles in styles.scss in a <style>...</style> tag in the element inspector.

I've setup Chrome Dev Tools workspaces similar to how @vt5491 did it in their SO here: https://stackoverflow.com/a/37627935/1762493 and that is working for the .ts files I believe but element styles don't link back to source maps in the element inspect as they've been built with ng serve into index.html's <style> element it seems.

• I'm running ng serve -dev -p=8081
• and tried ng serve -dev -p=8081 --aot=true but got a ENONET ng.factory.js missing error
• I tried putting styles in app.component.css versus styles.scss
• I tried this with ng build but it also puts all styles into index.html's <style>

Is this just the way it is currently with the Angular CLI? Maybe tweaking the web-pack underneath? It seems to be adding <style> tags per compiled stylesheet. If this is how the CLI is working currently then maybe this isn't just a question but a feature request because we are doing front-end work right, so having this working would save time.

Related to:

• How to save CSS Style changes to ANGULAR 2.0 components form within Chrome Developer Tools?
• Angular-cli not generating typescript files with --dev option
• How to debug angular 2 app using angular-cli webpack? (in WebStorm)
• SCSS SourceMap pointing to the Parent selector only.
  • github.com/angular/angular-cli Issue #2826

Thanks for any advice offered.

Answer 1

When you type ng serve by default angular cli doesn't include sourcemaps files for css files but you can include it by typing this command

ng serve -sm -ec

or

ng serve --sourcemap --extractCss

I use Angular Cli -v 1.0.3, and More information - Angular CLI special cases