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

Posted 2023-03-07

【中文标题】如何在 Chrome 开发人员工具中将 CSS 样式更改保存到 ANGULAR 2.0 组件表单？

【英文标题】：How to save CSS Style changes to ANGULAR 2.0 components form within Chrome Developer Tools?

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

【参考方案1】：

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

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

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