我正在尝试在 Angular 6/7 CLI 项目中使用具有 CSS 持久编辑功能的 Google Chrome 浏览器工作区。
在 angular.json 配置中添加“extractCSS:true”并使用“--source-map=true”标志时,我可以在 Chrome 的“sources”和“elements”选项卡中看到 CSS 文件,并且可以映射它添加到在线 CSS 文件中,但是当在“元素”面板中更改样式时,更改不会持久存在并且不会保存到文件中。
是否可以在带有工作区的 Chrome 开发工具中编辑组件 CSS 文件(无需弹出应用程序)?
- 在下面的GIF中你可以看到虽然文件名附近的小绿点是亮着的,说明网络之间的映射 资源和本地文件已经建立,变化来自 元素面板未反射(reflect)在文件中:
最佳答案
@Kayce Basques,Chrome DevTools 的技术作家评论了 question类似于这个,说:
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 开发工具中编辑组件 CSS 文件:(
关于angular - 使用 angular cli 6 项目在 chrome 的工作区中处理组件 css 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53412086/