使用Angular CLI 6项目在Chrome工作区中使用组件CSS文件 [英] Working with component css files in workspaces in chrome with angular cli 6 project

问题描述

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

I'm trying to use Google Chrome workspaces with CSS persistent editing in an Angular 6/7 CLI project.

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

When adding "extractCSS:true" in angular.json configuration and using "--source-map=true" flag I can see the CSS file in the "sources" and "elements" tabs in Chrome, and I can map it to the online CSS file, but when changing the style in the "elements" panel the change is not persistent and is not saved to the file.

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

Is it possible to edit the component CSS files from within Chrome dev tools with workspaces (without ejecting the app) ?

• 在下面的GIF中，您可以看到尽管文件名附近的小绿点已打开，这表明网络
  资源与本地文件之间的映射已建立之后，对
  元素面板的更改不会反映在文件中：

• In the following GIF you can see that although the little green dot near the file name is on, indicating that the map between the network resource and the local file has been established, the changes from the elements panel are not reflected in the file:

推荐答案

@Kayce Basques ，Chrome DevTools的技术作家对与此类似的问题进行了评论，说：

@Kayce Basques, the technical writer of Chrome DevTools commented on a question similar to this one, saying:

DevTools技术作者在此处。 benshabatnoam发布的工作流程是我们最好的。设置工作区，然后从源面板中编辑文件。从元素面板>样式窗格进行编辑可在基本项目上使用，但是使用源图并进行大量构建转换的框架（例如Angular）遇到了麻烦。很烂，我知道，但是我记得我们已经对其进行了深入研究，并且束缚了直到标准化了源地图的用法。

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组件文件：(

Unfortenatly the answer to your question is NO, we can't (as for today) edit the component CSS files from within Chrome dev tools with workspaces :(

这篇关于使用Angular CLI 6项目在Chrome工作区中使用组件CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！