How to save CSS Style changes to ANGULAR 2.0 compo

问题:

I'm building an Angular 2.0 CLI app - and it just happens that i have lots and lot of CSS tweaks to make.

I can of course modify something inside Webstorm, press Ctrl+S and than wait 3-7 seconds for the webpack build process to detect those changes and update the view.

But I feel like I'm wasting a lot of time for little changes like: border-radius form 5px to 3px - it's killing me..

If instead i change stuff inside Chrome Developer Tools - it updates instantly - no time wasted.. Instant Feedback!

Question:

How do i save all those CSS changes form Chrome back into the Angular CLI project? Across multiple components if possible:)

The Big Problem:

I know this is possible with simple css files but the Angular CLI bundles everything inside the main.bundle or styles.bundle or somewhere similar like you can see below: ( this is development mode not production )

I guess this is important, and can be a major draw back inside Angular Community - if hasn't been already figured out by now..Thank's so much!

回答1:

First, you can edit your local css files from chrome devtools.

By adding "extractCss" in angualr.json file, and adding your project folder to devtools filesystem folders, you'll be able to edit your local project files from devtools. Look at my answer here for more details.

As for I feel like I'm wasting a lot of time, there is nothing to do about this, each change in your project css files will resolve in recompiling.