使用Chrome DevTools的Sass Sourcemap

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("./")))
...

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

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

Answer 1

Crux ：您无法修改chrome devtools的检查元素面板中的scss规则属性。但是，我们可以使用chrome工作区编辑chrome源代码面板中的源文件（sass / scss）。

我遇到了同样的问题。我不得不抓头一整天来解决问题，并在浏览器中编辑我的sass / scss。这就是：

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

2。） Chrome 通过立即用编译的css替换scss规则来做到正确，因为chrome可以与css一起使用。它没有编译你的scss。

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

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

<强>首先

• 检查员
  
  
• 源文件
  
  

更改属性后

• 检查员
  
  
• 源文件
  
  

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

• 当我说源文件时，它表示出现在chrome的源代码面板中的文件和firefox中的样式编辑器

4。）最后，如果你真的想编辑，你可以在chrome的源代码面板中动态 sass / scss文件您必须查看 chrome workspaces 。但是，您再次不会能够在检查元素标签中对scss规则属性进行更改。

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