使用 Angular cli 6 项目在 Chrome 工作区中处理组件 CSS 文件

2023-12-30

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

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

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

  • 在下面的GIF中可以看到,虽然文件名附近的小绿点亮了,说明网络之间的映射 资源和本地文件已经建立,更改自 元素面板未反映在文件中:


@Kayce Basques,Chrome DevTools 的技术作家评论了question https://stackoverflow.com/q/53380234/2342414与此类似,说:

DevTools 技术作家在这里。 benshabatnoam 发布的工作流程是我们拥有的最好的工作流程。设置工作区,然后从“源”面板编辑文件。从“元素”面板 >“样式”窗格进行编辑适用于基本项目,但是使用源映射的框架(例如 Angular)遇到问题并进行大量构建转换。很糟糕,我知道,但我记得我们已经深入研究过这个问题,但我们却束手无策直到源映射的使用标准化.

不幸的是你的问题的答案是NO,我们无法(就今天而言)使用工作区从 Chrome 开发工具中编辑组件 CSS 文件:(

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Angular cli 6 项目在 Chrome 工作区中处理组件 CSS 文件 的相关文章

随机推荐

  • 使用 Spring Data 将 DBObject 插入 MongoDB

    我尝试使用 Spring Data 将以下 DBObject 插入 MongoDB BasicDBObject document new BasicDBObject document put country us document put
  • 在 Visual Studio 中使用 NLog 设置具有多个项目的 C# 解决方案

    我在 Visual Studio 2012 中的解决方案当前包含两个项目 DLL WPF 应用程序 需要 DLL 的方法 DLL 和 WPF 应用程序都使用NLog用于记录 目前每个项目都包含NLogDLL 本身 这是我不明白的地方 对我来
  • 背景图像未显示在 Heroku 中

    我在本地使用的 Heroku 网站的背景图像有问题 background image url background stripe png 有效 但部署后文件已损坏 我尝试过使用 background image image url back
  • VBA:如何仅保留字符串中的日期值?

    我有一个下面的字符串 想知道如何从中提取日期值并将它们存储在单独的单元格中 11AUG2016 更改 gggqqq2i8yj 29SEP2016 删除 tyijdg298 30SEP2016 添加 mkdjenb200 03OCT2016
  • 报告不确定性:给定平均值和标准误差,仅显示有效数字

    目的是显示多次观察的结果 而不需要 不必要的数字 即用 与给定一致的有效数字位数 不确定 For example if computed mean 123 45 and err 0 0012345 then the expected out
  • 如何使用 Golang 将文件添加到现有 zip 文件

    我们可以创建一个 zip 新文件并使用 Go 语言添加文件 但是 如何使用 GoLang 添加带有现有 zip 文件的新文件 如果我们可以使用Create函数 如何获取zip writer引用 有点困惑 经过更多分析 我发现 无法使用现有的
  • Mongoid 限制删除多个

    使用mongoid 如何删除前10000个文档error message字段是 Error not found 原生 mongo 查询将被愉快地接受 MongoDB 支持删除限制 删除命令从集合中删除文档 单个 删除命令可以包含多个删除规范
  • System.StackOverflowException WPF MVVM

    我正在尝试使用 MVVM 在 WPF 中创建一个简单的数字时钟 我有一个带有装订的标签 背后的代码很简单 每秒都会引发一个属性更改事件 并且我有一个 stackoverflow 异常 有人可以帮忙吗 public partial class
  • 如何调用 script 标签中定义的 javascript 函数?

    Example 我该怎么打电话test 编辑 我没有正确解释这一点 我正在使用node js的request模块来加载包含javascript函数的外部html文件 request get options function error re
  • 在 vim 中映射 Shift 键

    I m having an issue when mapping the Shift key in VIM I want Ctrl L to behave differently than Ctrl Shift L 所以我有这个 for i
  • 数据流管道和 pubsub 模拟器

    我正在尝试设置我的开发环境 我没有在生产中使用 google cloud pubsub 而是使用 pubsub 模拟器进行开发和测试 为了实现这一点 我设置了以下环境变量 export PUBSUB EMULATOR HOST localh
  • 蓝牙配对时未调用 BroadcastReceiver

    很简单 我唯一的代码是这样的 final BroadcastReceiver mReceiver new BroadcastReceiver Override public void onReceive Context context In
  • Python 集合.counter

    python新手 想知道如何告诉python第3行中的数据都是一个数字而不是单个数字 我正在使用 collections Counter 但它可能不是正确的 datafile csv Z4 29 Mar 13 Name 1 1234567
  • 使用 R markdown、knitr、pandoc、beamer 绘图大小和分辨率

    默认情况下不适合幻灯片 甚至不通过任何其他方式打印 这是 Rmd 编辑 看来你必须在每个块中使用plot 现在打印第二个图 Plot should show at high resolution r echo FALSE comment l
  • 如何在 php 中获取部分从 jquery 加载的页面的整个 html

    我这问题好几天了 我必须从 php 加载页面的整个 html 在此页面上有一个 jquery 函数 当所有页面加载完毕时会调用该函数 这个函数将其他html加载到页面中 所以我必须加载所有html 也加载了jquery的部分 我可以知道我得
  • 如何检测软键盘输入法是否覆盖整个屏幕?

    我正在创建一个应用程序 用户可以在其中单击选项卡 并且将以编程方式显示软键盘 但是 如果软键盘要覆盖整个屏幕 如提取的 EditText 我不想显示软键盘 如下所示 检测屏幕方向可能会有所帮助 但据我所知 在平板电脑上 即使在横向上 软键盘
  • 获取主干集合中属性不等于某个值的所有模型

    这取自 Backbone js 文档 var musketeers friends where job Musketeer 在那里你可以获得一系列工作平等的模型 那就是 火枪手 但我该如何做相反的事情呢 我怎样才能获得一系列工作不是 火枪手
  • 如何从 ListView 控件中的各个项目中删除复选框?

    我有一个 ListView 其中包含 名称 预期 总计 列 我想在末尾添加另一列 重新计数 理想情况下 仅当 预期 值大于 总计 值时 重新计数 列才会有一个复选框 到目前为止 我已经获得了带有列的 ListView 并且可以在左侧添加一个
  • Android 中的简单 XML 解析

    我的xml如下所示 lt sUID gt yPkmfG3caT6cxexj5oWy34WiUUjj8WliWit45IzFVSOt6gymAOUA lt sUID gt lt Shipping gt 0 00 lt Shipping gt
  • 使用 Angular cli 6 项目在 Chrome 工作区中处理组件 CSS 文件

    我正在尝试在 Angular 6 7 CLI 项目中使用具有 CSS 持久编辑功能的 Google Chrome 工作区 当在 angular json 配置中添加 extractCSS true 并使用 source map true 标