如何在 Chrome 开发人员工具中将 CSS 样式更改保存到 ANGULAR 2.0 组件表单？答案

【问题标题】：How to save CSS Style changes to ANGULAR 2.0 components form within Chrome Developer Tools?如何在 Chrome 开发人员工具中将 CSS 样式更改保存到 ANGULAR 2.0 组件表单？
【发布时间】：2017-01-31 11:36:43
【问题描述】：

我正在构建一个 Angular 2.0 CLI 应用程序 - 碰巧我有很多 CSS 调整要做。

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

但是我觉得我在浪费很多时间来进行一些小的更改，例如：边框半径从 5px 到 3px - 这让我很生气..

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

问题：

如何将所有这些 CSS 更改从 Chrome 保存回 Angular CLI 项目？如果可能的话，跨多个组件：)

大问题：

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

我想这很重要，并且可能是 Angular 社区内部的一个主要缺点 - 如果现在还没有弄清楚的话..非常感谢！

【问题讨论】：

嗨@Alon，我在这里有同样的问题：stackoverflow.com/questions/40162982/… 有不同的截图。我开始研究我们如何扩展/修改 CLI 或 @ngtools/webpack 的行为，以便至少在 -dev 模式下不将样式包装到 <style> 标签中。如果我得到它，我会在这里报告。

标签： angular webpack google-chrome-devtools angular-cli

【解决方案1】：

首先，您可以从 chrome devtools 编辑本地 css 文件。

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

至于我觉得我浪费了很多时间，这没什么可做的，你项目css文件中的每一次更改都会在重新编译时解决.

【讨论】：