Sass 带有 Chrome DevTools 的 Sourcemap

Question

我们正在使用 gulp-sass to compile our SCSS, and using gulp-sourcemaps 在我们的开发环境中生成源映射：

...
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.init()))
.pipe(plugins.sass({ 
  outputStyle: "nested"
}))
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.write("./")))
...

源地图已生成，没有问题。在 Chrome DevTools 中检查元素时，我们可以看到源 SASS 定义，但是一旦我们修改属性值或选择，我们就会丢失源映射并在已编译的 [=28] 中显示该行=].看截图：

非常烦人，我们已尝试解决此问题。有什么建议么？请注意，在 Firefox 中，我们没有看到同样的问题。

Answer 1

Crux : 您不能在 chrome devtools 的 inspect element panel 中修改 scss 规则属性.但是，我们可以使用 chrome 工作区在 chrome 的源面板中编辑源文件 (sass/scss)。

我遇到了同样的问题。我不得不绞尽脑汁一整天才弄清楚问题所在，并使我的 sass/scss 在 browser.Here 中可编辑：

1.) Sourcemap 用于引用源文件而不是编辑源文件 (sass/scss)，以便您可以调试代码。 即我们可以参考导致我们编译的 css 规则的确切行，但不能编辑它

2.) Chrome 立即用已编译的 css 替换您的 scss 规则，因为 chrome与 css 合作。它不会编译您的 scss。

此外，当您对 css 规则进行任何更改时，此规则也会在源文件 (.css ) 以及 chrome 源选项卡中进行修改。这意味着我们在检查器中所做的更改直接映射到我们的 css 文件。

例如：当我在检查器中更改一些属性时，它也会在 css 源文件中更改。

最初

检查员
源文件

更改后属性

检查员
源文件

3.) 关于 Firefox，您可能认为它适用于 firefox，但我认为它有点误导。它具有误导性，因为 firefox 不会更改任何源文件中的任何内容（ css 和 scss ）所以我们不知道他们实际上做了什么，他们是否真的编译了我们的 scss文件或者他们在幕后使用了 css。

当我说源文件时，它是指 chrome 的源面板和 firefox[=72= 的样式编辑器中存在的文件]

4.) 最后，如果你真的想编辑你的sass/scss文件在 chrome 的源代码面板中飞行，您必须查看 chrome workspaces。但是话又说回来，您不会能够在检查元素选项卡中对 scss 规则属性进行更改 =72=].

** 同样，使用 chrome 工作区实际上并没有在浏览器中将我们的 scss 编译成 css 实际发生了什么是浏览器将我们的文件（在源选项卡中）映射到系统文件（某种程度上使浏览器成为我们的代码编辑器）

Sass 带有 Chrome DevTools 的 Sourcemap

Sass Sourcemap with Chrome DevTools

google-chrome

source-maps

gulp-sass

gulp-sourcemaps