如何在Chrome开发者工具中将CSS样式更改保存为ANGULAR 2.0组件表单? [英] How to save CSS Style changes to ANGULAR 2.0 components form within Chrome Developer Tools?

问题描述

我正在构建Angular 2.0 CLI应用程序-碰巧我要进行很多CSS调整.

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

我当然可以在Webstorm中进行一些修改，按Ctrl + S，然后等待3到7秒钟，以便Webpack构建过程可以检测到这些更改并更新视图.

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.

但是我觉得我在浪费很多时间，因为一些小的变化，例如:边框半径从5px变为3px-真是使我丧命.

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..

如果我改为在Chrome开发者工具中进行更改-它会立即更新-不会浪费时间..即时反馈！

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

问题:

如何将所有Chrome的CSS更改保存回Angular CLI项目? 如果可能，请跨多个组件:)

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

大问题:

我知道这可以通过简单的css文件来实现，但是Angular CLI会将main.bundle或styles.bundle或类似的东西捆绑在一起，如下所示: (这是开发模式而不是生产模式)

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 )

我想这很重要，并且可能是Angular社区的一个主要缺点-如果目前还没有发现的话.谢谢！！

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!

推荐答案

首先，您可以通过chrome devtools编辑本地的CSS文件.

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

通过在angualr.json文件中添加"extractCss"，并将您的项目文件夹添加到devtools文件系统文件夹，您将能够从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.

关于 我觉得我在浪费很多时间 ，与此无关，您的项目css文件中的每个更改都将在重新编译时解决.

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.

这篇关于如何在Chrome开发者工具中将CSS样式更改保存为ANGULAR 2.0组件表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！