我可以直接从chrome DevTools编辑我的角度项目的CSS文件吗？

Question

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

我当前的工作流程涉及从开发工具中进行大量繁琐的复制和粘贴,如下所示:

Chrome开发工具能够将DOM上的样式更改保存到源css文件(使用工作区保存更改到磁盘),但我不知道这是否适用于Angular和Webpack使用模拟组件样式的方式.

必须有比我目前更快的工作流程.有小费吗？

Answer 1

您可以直接从chrome devtools编辑css项目文件.请遵循以下步骤:

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

这样,您将在检查中看到css文件而不是标题中的内部样式标记(您可以在下面的步骤3中看到示例图像).

2. 打开chrome devtools,Sources选项卡,Filesystem left tab并添加你的项目文件夹:

这是一个神奇的技巧,这将让你从devtools编辑你的本地文件!

3. 现在当你检查你的html for css时,你可以点击css文件,你将被重定向到你的本地文件:

4. 编辑对文件的更改.

5. 保存文件.

魔法!您的本地文件已被修改!

我喜欢Chrome!

干杯