Chrome/Sass Sourcemaps，在检查器中所做的更改未保存在 SCSS 文件中

Posted 2023-03-07

【中文标题】Chrome/Sass Sourcemaps，在检查器中所做的更改未保存在 SCSS 文件中

【英文标题】：Chrome/Sass Sourcemaps, changes made in inspector not saved in SCSS file

【发布时间】：2014-06-17 03:22:28

【问题描述】：

以下是我所说的内容的简要总结：

https://medium.com/what-i-learned-building/b4daab987fb0

当使用 Chrome 并设置工作区和源映射，并链接本地/网络文件时，我可以使用 Chrome 网络检查器（在元素 -> 样式窗格下）识别选择器在正确 SCSS 文件中的位置。另外，我可以点击那个，进入SCSS文件，进行修改，然后成功保存到文件系统。但是，我之前所做的工作是在 elements->styles 面板中进行更改以在 SCSS 文件中进行更新（即，如果我在元素选项卡中进行更改并检查 chrome 中的 SCSS 文件它应该改变它）。

而是对 CSS 文件进行更改。显然这不是很有用：

SCSS 文件一更改就会被覆盖 这意味着 Chrome 会显示 SCSS 文件中不存在的样式，即使在重新加载后也是如此，因为它们永久保存在 CSS 文件中

我已经在 OSX 和 Windows 上使用 Sass 3.3.6 进行了尝试。 也可以确认不是#9中提到的“../”问题 https://code.google.com/p/chromium/issues/detail?id=273384 因为 sass 文件现在位于 css 文件中。样式表标签上也没有 style.css?ver=x 扩展。

【参考方案1】：

https://code.google.com/p/chromium/issues/detail?id=257778 是您所要求的。如果涉及变量或复杂的语言特性，在一般情况下，在编辑样式窗格时，不可能（不明确）修补 SCSS 代替 CSS，因此最好的办法是 Ctrl -单击所需的 CSS 属性在样式窗格中导航到相应的 SCSS 片段并编辑纯 SCSS 资源文本，然后保存 (Ctrl+S) 并让 sass 编译器（在监视模式下运行）完成其余工作。您应该同时启用 Enable CSS source maps 和 Auto-reload generated CSS 设置，以便 DevTools 获取生成的 CSS 更改。

【讨论】：

谢谢，已接受。当我认为这已经起作用时，我一定是弄错了。尽管如此，它将是一个很好的功能，对于SELENCER和选择器中只有普通的CSS样式时，对于STADES窗格来修补SCSS，并且选择器不使用SASS占位符等。 span>

这与code.google.com/p/chromium/issues/detail?id=257778@alexander-pavlov 有关吗？没有办法让 sass 持久化在样式窗格中？

@fernandopasik：这仅与您提到的问题无关。那是关于在样式窗格中生成的 CSS 编辑杀死 CSS->SCSS 链接。

@fernadopasik 并非不可能，请在该问题上查看我的 cmets。在进行任何编辑之前，它知道 LESS 中的正确行。问题是当我在检查器与源选项卡中编辑同一行时，它的行为不同。如果可以在源选项卡中执行，则可以在检查器选项卡中执行。 Chrome 只需要修复故障。