css - 我可以直接从 chrome DevTools 编辑我的 Angular 项目的 CSS 文件吗？

Question

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

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

Chrome 开发工具能够将在 DOM 上所做的样式更改保存到源 css 文件（使用 Workspaces 将更改保存到磁盘），但我不知道这是否适用于 Angular 和 Webpack 使用模拟组件样式的方式。

必须有一个比我目前正在做的更快的工作流程。有小费吗？

标签： cssangularvisual-studio-codegoogle-chrome-devtoolsangular-cli

Answer 1

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

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

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

2. 打开 chrome devtools、Sources 选项卡、Filesystem 左侧选项卡并添加您的项目文件夹：

这是魔术，它可以让你从 devtools 编辑你的本地文件！

3. 现在，当您检查 html 中的 css 时，您可以单击 css 文件，您将被重定向到本地文件：

4. 编辑您对文件的更改。

5. 保存文件。

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

我爱铬！

干杯