Sass Sourcemap 与 Chrome DevTools

Question

我们正在使用gulp-sass 编译我们的SCSS，并使用gulp-sourcemaps 在我们的开发环境中生成源映射：

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

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

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

Answer 1

Crux ：您无法在 chrome devtools 的 inspect element panel 内修改 scss 规则属性。但是，我们可以使用 chrome 工作区在 chrome 的源面板中编辑源文件（sass/scss）。

我遇到了同样的问题。我不得不挠头一整天才能找出问题所在，并使我的 sass/scss 在浏览器中可编辑。这里是：

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

2.) Chrome 通过立即将您的 scss 规则替换为已编译的 css 来做到这一点，因为 chrome 可以与 css 一起使用。它不会编译你的 scss。

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

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

最初

• 检查员
  
  
• 源文件
  
  

更改属性后

• 检验员
  
  
• 源文件
  
  

3.) 关于 Firefox，您可能会认为它在 Firefox 的情况下工作，但我认为它有点误导。它具有误导性，因为 firefox 不会更改任何源文件（既不是 css 也不是 scss ）中的任何内容，因此我们不知道他们实际做了什么，无论他们是实际编译了我们的 scss 文件还是他们在后台使用了 css。

• 当我说源文件时，它是指存在于 chrome 和 Firefox 中的样式编辑器的源面板中的文件

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

** 同样，使用 chrome 工作区实际上不会在浏览器中将我们的 scss 编译为 css 实际发生的是浏览器将我们的文件（在源选项卡中）映射到系统文件（有点浏览器我们的代码编辑器）