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

Question

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

在angular.json配置中添加“extractCSS：true”并使用“--source-map = true”标志时，我可以在Chrome中的“sources”和“elements”标签中看到CSS文件，我可以将其映射到在线CSS文件，但在“元素”面板中更改样式时，更改不会持久，也不会保存到文件中。

是否可以使用工作区从Chrome开发工具中编辑组件CSS文件（不弹出应用程序）？

• 在下面的GIF中，您可以看到虽然文件名附近的小绿点已打开，表示已建立网络资源和本地文件之间的映射，但元素面板中的更改不会反映在文件中：

---

Answer 1

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

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

不幸的是，你的问题的答案是否定的 ，我们不能（至于今天）在Chrome开发工具中使用工作区编辑组件CSS文件:(