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

标签 angular google-chrome google-chrome-devtools angular-cli angular-cli-v6

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

在 angular.json 配置中添加“extractCSS:true”并使用“--source-map=true”标志时,我可以在 Chrome 的“sources”和“elements”选项卡中看到 CSS 文件,并且可以映射它添加到在线 CSS 文件中,但是当在“元素”面板中更改样式时,更改不会持久存在并且不会保存到文件中。

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

  • 在下面的GIF中你可以看到虽然文件名附近的小绿点是亮着的,说明网络之间的映射 资源和本地文件已经建立,变化来自 元素面板未反射(reflect)在文件中:

changes are not saved to file

最佳答案

@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/

相关文章:

angular - 如何使用装饰器使对象的 JSON.stringify 输出 getter ?

javascript - angular-highcharts 和 highcharts-angular 有什么区别?

java - 如何从 Google Chrome 应用程序运行 Java 应用程序?

javascript - 使用 Turbolinks 使哈希链接在 Chrome 中工作

google-chrome - 在 DevTools 的性能选项卡中分析鼠标单击

windows - 关闭开发工具后如何维护Chrome "enable request blocking"?

javascript - POST 从 Typescript 到 Web API API,无法传递 JSON 对象

javascript - Ionic 2 InAppBrowser 不会加载插入的链接

php - ERR_CONNECTION_RESET 与 PHP 脚本

css - 删除开发期间在 chrome devtools 中创建的所有诊断样式