如何在Chrome Developer Tools中将CSS样式更改保存到ANGULAR 2.0组件？

Question

我正在构建一个Angular 2.0 CLI应用程序 - 而且我发现我需要进行大量的CSS调整。

我当然可以修改Webstorm中的内容，按Ctrl + S，然后等待3-7秒，以便webpack构建过程检测这些更改并更新视图。

但我觉得我浪费了很多时间进行了一些变化，例如：border-radius形式5px到3px - 它杀了我......

如果我改变Chrome开发者工具中的内容 - 它会立即更新 - 不会浪费时间.. 即时反馈！

问题：

如何将Chrome中的所有CSS更改保存回Angular CLI项目？ 如果可能，请跨多个组件：）

重大问题：

我知道这可以通过简单的css文件实现，但Angular CLI捆绑了main.bundle或styles.bundle中的所有内容或类似的地方，如下所示： （这是开发模式而非生产）

我想这很重要，并且可以成为Angular社区内的一个主要缺点 - 如果现在还没有被弄清楚的话......感谢他们！

Answer 1

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

通过在angualr.json文件中添加“ extractCss”，并将您的项目文件夹添加到devtools文件系统文件夹，您将能够从devtools编辑本地项目文件。有关更多详细信息，请查看此处的my answer。

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