使用 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.json 配置中添加extractCSS:true"并使用--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中可以看到虽然文件名旁边的小绿点亮着，说明网络之间的图资源和本地文件已经建立，从元素面板未反映在文件中:

推荐答案

@Kayce Basques，Chrome DevTools 的技术作者评论了 问题类似于这个，说:

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

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

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屋！