Can I edit my angular project's CSS files directly from chrome DevTools?

Question

What is the most efficient way to style components in the browser dev tools with the default view encapsulation (emulated)?

My current workflow involves a lot of ted

Answer 1

...I don't know if this will work with the way Angular and Webpack use emulated component styles.

TL;DR: You can't do this quite in the way you'd like to.

Angular scopes styles to components, and thus the .some-class-name[ngcontent-c5] notation in the Chrome inspector. As such, dev tools has no way of knowing exactly where to trace the change you made back to, other than the file it originated from using the source map.

As you mention in your question, you can load the project working directory into dev tools (article you posted) and edit the file itself. On save, the angular watcher will register the change and reload. This will work with pure css/js, as well as pre-compiler scss, ts, etc.

So to answer the question: yes, webpack will still recompile when you do that, but not quite in the way you're looking for.

Answer 2

You can directly edit your css project files from chrome devtools. Follow this steps:

1. In angular.json add "extractCss": true like so:

This way you'll see the css files in inspection instead of inner style tags in header (you can see an example image in step 3 below).

2. Open chrome devtools, Sources tab, Filesystem left tab and add your project folder:

This is the magic trick, this will let you edit your local files from devtools!

3. now when you inspect your html for css, you can click the css file and you'll be redirected to your local file:

4. Edit your changes to the file.

5. Save the file.

Magic! Your local file was modified!

I LOVE Chrome!

Cheers