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

Question

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

我当前的工作流程涉及很多开发工具的繁琐复制和粘贴工作，例如：

Chrome开发者工具可以将DOM上的样式更改保存到源css文件（Save Changes To Disk With Workspaces），但是我不知道这是否可以与Angular和Webpack使用模拟组件样式的方式一起使用

必须比我目前正在做的工作流程更快。有提示吗？

Answer 1

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

1. 在angular.json中添加“ extractCss”：true就像这样：

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

1. 打开chrome devtools，“源”标签，“文件系统”左标签，然后添加您的项目文件夹：

这是魔术，这将使您可以从devtools编辑本地文件！

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

1. 编辑对文件的更改。

2. 保存文件。

魔术！您的本地文件已修改！

我爱Chrome！

欢呼

Answer 2

  

...我不知道这是否可以与Angular和Webpack使用模拟的组件样式一起使用。

TL; DR：您不能完全按照自己的方式进行操作。

角度范围的样式适用于组件，因此也适用于Chrome检查器中的.some-class-name[ngcontent-c5]表示法。这样，除了使用源映射生成的文件之外，开发人员工具无法确切知道将所做的更改追溯到何处。

正如您在问题中提到的，您可以将项目工作目录加载到开发工具（article you posted）中，并编辑文件本身。保存后，角度观察器将记录更改并重新加载。这将与纯css / js以及预编译器scss，ts等一起使用。

所以要回答这个问题：是的，当您这样做时，webpack仍然会重新编译，但并不是完全按照您想要的方式进行编译。