我可以直接从chrome DevTools编辑我的角度项目的CSS文件吗? [英] Can I edit my angular project's CSS files directly from chrome DevTools?

问题描述

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

What is the most efficient way to style components in the browser dev tools with the default view encapsulation (emulated)?

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

My current workflow involves a lot of tedious copying and pasting from the dev tools like this:

Chrome开发者工具可以将对DOM所做的样式更改保存到源CSS文件(使用工作区将更改保存到磁盘)，但是我不知道这是否可以与Angular和Webpack使用模拟组件样式的方式一起使用.

Chrome dev tools has the ability to save styling changes made on the DOM to the source css file (Save Changes To Disk With Workspaces), but I don't know if this will work with the way Angular and Webpack use emulated component styles.

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

There's got to be a quicker workflow than what I am currently doing. Any tips?

推荐答案

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

You can directly edit your css project files from chrome devtools. Follow this steps:

1. 在angular.json中添加"extractCss":true就像这样:

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

This way you'll see the css files in inspection instead of inner style tags in header (you can see an example image in step 3 below).

1. 打开chrome devtools，源"选项卡，文件系统"左选项卡，然后添加您的项目文件夹:

1. Open chrome devtools, Sources tab, Filesystem left tab and add your project folder:

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

This is the magic trick, this will let you edit your local files from devtools!

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

1. 编辑对文件的更改.

1. Edit your changes to the file.

保存文件.

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

我爱Chrome！

欢呼

这篇关于我可以直接从chrome DevTools编辑我的角度项目的CSS文件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！