使用 angular cli 6 项目在 chrome 的工作区中处理组件 css 文件
Working with component css files in workspaces in chrome with angular cli 6 project
我正在尝试在 Angular 6/7 CLI 项目中使用 Google Chrome 工作区和 CSS 持久编辑。
在 angular.json 配置中添加 "extractCSS:true" 并使用“--source-map=true”标志时，我可以在 "sources" 和 "elements" 选项卡 Chrome，我可以将其映射到在线 CSS 文件，但是当在 "elements" 面板中更改样式时，更改不是持久的并且不会保存到文件。
是否可以从 Chrome 带有工作区的开发工具中编辑组件 CSS 文件（无需弹出应用程序）？
- 在下面的GIF中可以看到，虽然文件名附近的小绿点是亮着的，说明网络之间的映射
资源和本地文件已经建立，变化来自
元素面板未反映在文件中：
@Kayce Basques，Chrome DevTools 的技术作者评论了一个与此类似的 ，他说：
DevTools technical writer here. The workflow that benshabatnoam posted is the best we've got. Set up a Workspace and then edit your files from the Sources panel. Editing from Elements panel > Styles pane works on basic projects, but has trouble with frameworks (such as Angular) that use sourcemaps and do a lot of build transformations. Sucks, I know, but I recall that we've looked into it in-depth and our hands are tied until sourcemap usage is standardized.
很遗憾，您的问题的答案是否，我们不能（就今天而言）编辑Chrome dev 中的组件CSS 文件带工作区的工具 :(
我正在尝试在 Angular 6/7 CLI 项目中使用 Google Chrome 工作区和 CSS 持久编辑。
在 angular.json 配置中添加 "extractCSS:true" 并使用“--source-map=true”标志时，我可以在 "sources" 和 "elements" 选项卡 Chrome，我可以将其映射到在线 CSS 文件，但是当在 "elements" 面板中更改样式时，更改不是持久的并且不会保存到文件。
是否可以从 Chrome 带有工作区的开发工具中编辑组件 CSS 文件（无需弹出应用程序）？
- 在下面的GIF中可以看到，虽然文件名附近的小绿点是亮着的，说明网络之间的映射 资源和本地文件已经建立，变化来自 元素面板未反映在文件中：
@Kayce Basques，Chrome DevTools 的技术作者评论了一个与此类似的
DevTools technical writer here. The workflow that benshabatnoam posted is the best we've got. Set up a Workspace and then edit your files from the Sources panel. Editing from Elements panel > Styles pane works on basic projects, but has trouble with frameworks (such as Angular) that use sourcemaps and do a lot of build transformations. Sucks, I know, but I recall that we've looked into it in-depth and our hands are tied until sourcemap usage is standardized.
很遗憾，您的问题的答案是否，我们不能（就今天而言）编辑Chrome dev 中的组件CSS 文件带工作区的工具 :(