我能否直接通过Chrome DevTools编辑我的Angular项目的CSS文件？

Question

什么是在浏览器开发工具中使用默认视图封装（模拟）来为组件设置样式的最有效方法？

我的当前工作流程涉及很多从开发工具中复制和粘贴的繁琐操作，如下所示：

Chrome开发工具可以将对DOM所做的样式更改保存到源CSS文件中（使用工作区将更改保存到磁盘），但我不知道这是否适用于Angular和Webpack使用模拟组件样式的方式。

肯定有比我目前所做的更快捷的工作流程。有什么技巧吗？

- Kevin LeStarge

---

@KayceBasques 7.0.0 - Kevin LeStarge

DevTools技术作家在此。benshabatnoam发布的工作流程是我们目前最好的选择。设置一个Workspace，然后从Sources面板中编辑您的文件。从Elements面板>样式窗格进行编辑适用于基本项目，但对于使用sourcemaps并进行大量构建转换（例如Angular）的框架存在问题。很遗憾，我知道，但我记得我们已经深入研究过它，并且在sourcemap使用标准化之前，我们的手是被束缚住了。 - Kayce Basques

话虽如此，我并没有调查Angular为生成源映射提供哪些选项。您可能可以尝试调整这些选项，找到一个有助于DevTools将样式面板中的更改解析为真实源文件的选项。 - Kayce Basques

@KevinLeStarge，为什么你没有纠正我的答案？ - benshabatnoam

@benshabatnoam 你要如何进行更正？ - Kevin LeStarge

Answer 1

您可以直接从Chrome DevTools编辑您的CSS项目文件。请按照以下步骤操作：

1. 在angular.json中添加"extractCss": true，如下所示：

这样，您将在检查中看到CSS文件，而不是头部内部样式标签（您可以在下面的第3步中看到示例图像）。

2. 打开Chrome DevTools，选择Sources选项卡，然后在左侧选择Filesystem选项卡并添加您的项目文件夹：

这是一个神奇的技巧，它将允许您从DevTools编辑本地文件！

3. 现在，当您检查HTML的CSS时，您可以单击CSS文件，然后将重定向到您的本地文件：

4. 对文件进行更改。

5. 保存文件。

神奇！您的本地文件已被修改！

我喜欢Chrome！

干杯！

- benshabatnoam

---

在第三步中，您需要进入Chrome Dev Tools的Sources选项卡并在那里编辑CSS文件。在更改保存之前，实际呈现在DOM上的组件不会显示出来。我希望能够从Dev Tools的Elements->Styles选项卡中编辑组件的样式，并从那里保存。您的建议在这种情况下行不通，对吗？ - Kevin LeStarge

你的问题中没有提到这个，或者可能是我没有理解好问题。在样式选项卡中保存还有两个未解决的问题，链接如下：https://dev59.com/ga_la4cB1Zd3GeqP0_fl， https://stackoverflow.com/q/47913645/2342414。我正在尝试寻找解决方法。 - benshabatnoam

没错，我在问题中没有提到那个。我会跟随你提供的其他链接来解决问题。谢谢！ - Kevin LeStarge

发现了一篇来自devTools的文章（https://developers.google.com/web/tools/chrome-devtools/workspaces/#top_of_page）。从这篇文章中可以看出，样式标签页中的更改应该会保存本地CSS。这可能是一个错误吗？ - benshabatnoam

请查看我的评论，关于在样式面板中进行的更改未保存到源文件的问题。 - Kayce Basques

Answer 2

...我不知道这是否适用于Angular和Webpack使用的模拟组件样式的方式。

简而言之：你不能完全按照自己的想法做到这一点。

Angular将样式限定在组件范围内，因此在Chrome检查器中使用了“.some-class-name [ngcontent-c5]”符号。因此，开发工具无法确切地知道要追踪您所做的更改的位置，除了使用源映射从其起源文件开始。

正如您在问题中提到的那样，您可以将项目工作目录加载到开发工具中（您发布的文章），并编辑文件本身。保存后，angular监视器将注册更改并重新加载。这适用于纯css/js以及预编译器scss、ts等。

回答问题：是的，当您这样做时，webpack仍然会重新编译，但不完全是您想要的方式。

- Kurtis Jungersen