21

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.

enter image description here

enter image description here

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:

Thanks for any advice offered.

Community
  • 1
  • 1
Mikeumus
  • 3,570
  • 9
  • 40
  • 65

2 Answers2

14

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

PVitt
  • 11,500
  • 5
  • 51
  • 85
Serhiy Koziuk
  • 696
  • 6
  • 7
  • On AngularCLI **1.3.0** `ng serve -sm -ec` **works**, but `ng serve --sourcemap --extractCss` **doesn't**. – Francesco Borzi Aug 16 '17 at 15:54
  • Hi, ShinDarth. Very strange. I updated AngularCLI 1.3.2 and all works. – Serhiy Koziuk Sep 07 '17 at 13:24
  • Check your AngularCLI version. I'm not sure that it works well in newer versions AngularCLI. I tested for Angular CLI version 1.3.2 and all works well. – Serhiy Koziuk Nov 21 '17 at 11:34
  • the longhand version would be `ng serve --sourcemap --extract-css` – greatgumz Nov 29 '17 at 20:46
  • @SerhiyKoziuk, it shows the css mapping of styles.bundles.css but not the actual mapping with scss or _scss files. Any idea how to achieve that? – Praveen Dec 04 '17 at 04:11
  • 1
    @link2pk Hi, I know about this problem. it's a problem inside AngularCLI. I updated me AngularCLI to version 1.5.0 and sours maps for scss don't work normally. – Serhiy Koziuk Jan 02 '18 at 22:10
  • This only works for SCSS files inside components and not for styles included in the global `styles.scss` file. Use CharltonCs answer [here](https://github.com/angular/angular-cli/issues/9099#issuecomment-363324607), works for me CLI v1.5.5. – Nick M Jun 20 '18 at 05:46
4

Angular-cli uses webpack, but it comes with its own configuration files in /node_modules/angular-cli/models.

You can modify them, but if you upgrade angular-cli it will overwrite your files. So make sure to back them up.

Yes, it is meant to go inline <style> tags. I agree that this seems weird and should be in a separate file, mainly so it can be cached by the user and reduce your views chunk size. It might be that they think inline is good as when you're in development mode you don't want it cached, which is fine, but on 'ng build' it should be compiled to its own file.

I know you can configure webpack to do that using the "extract-text-webpack-plugin", but I am not too familiar with it.

I would like to see angular-cli do that on build or have an option in the configuration for that.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
ggedde
  • 582
  • 5
  • 12
  • 1
    [UPDATE]. Angular now has this built in to its builds. As Serhiy mentions your can use the "-sm" and "-ec" options. – ggedde Oct 12 '17 at 15:02
  • 3
    "ng serve -sm -ec" shows the css mapping of styles.bundles.css but not the actual mapping with scss or _scss files. Any idea how to achieve that? – Praveen Dec 04 '17 at 04:22
  • @link2pk Thanks for your question, it seems to still be an issue. Has anyone solved doing an `ng serve` where it shows actual SCSS lines? – ryanm Dec 04 '18 at 16:53