使用 Angular cli 6 项目在工作区中使用 chrome 中的组件 css 文件答案

【问题标题】：Working with component css files in workspaces in chrome with angular cli 6 project使用 Angular cli 6 项目在工作区中使用 chrome 中的组件 css 文件
【发布时间】：2019-04-24 00:34:06
【问题描述】：

我正在尝试在 Angular 6/7 CLI 项目中使用具有 CSS 持久编辑功能的 Google Chrome 工作区。

在 angular.json 配置中添加“extractCSS:true”并使用“--source-map=true”标志时，我可以在 Chrome 的“源”和“元素”选项卡中看到 CSS 文件，并且可以映射它到在线 CSS 文件，但是在“元素”面板中更改样式时，更改不是持久的，也不会保存到文件中。

是否可以在带有工作区的 Chrome 开发工具中编辑组件 CSS 文件（无需弹出应用程序）？

在下面的GIF中可以看到虽然文件名附近的小绿点是亮的，说明网络之间的映射资源和本地文件已经建立，从元素面板未反映在文件中：

【问题讨论】：

标签： angular google-chrome google-chrome-devtools angular-cli angular-cli-v6

【解决方案1】：

Chrome DevTools 的技术作家@Kayce Basques 评论了一个与此类似的question，他说：

这里是 DevTools 技术作家。 benshabatnoam 发布的工作流程是我们所拥有的最好的。设置一个工作区，然后从 Sources 面板编辑您的文件。从元素面板编辑 > 样式面板适用于基本项目，但 在使用源映射的框架（例如 Angular） 上遇到问题并进行大量构建转换。糟糕，我知道，但我记得我们已经深入研究过它，并且我们的双手被束缚直到源映射的使用标准化。

不幸的是，您的问题的答案是否，我们不能（就今天而言）使用工作区从 Chrome 开发工具中编辑组件 CSS 文件:(

【讨论】：