含铬DevTools的Sass Sourcemap

Question

我们使用gulp-sass编译SCSS，并在dev环境中使用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的检查元素面板中修改规则属性。但是，我们可以使用铬工作区来编辑铬源面板中的源文件(sass/scss)。

我也有同样的问题。我不得不用一整天的时间来解决这个问题，并使我的sass/scss在browser.Here中是可编辑的：

1.源代码映射用于引用源文件，而不是编辑源文件(sass/scss)，以便调试代码。

2. chrome 可以立即用编译后的css替换scss规则，因为chrome与css一起工作。它不编译你的scss。

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

对于示例:当我在检查器中更改某些属性时，它也会在css源文件中被更改。

最初

• 检查员

​

• 源文件

​

更改属性后的

• 检查员

​

• 源文件

​

3.关于火狐，您可能会认为它在火狐中起作用，但我认为这有点误导人。这让人产生误解，因为firefox不会改变任何源文件( css和scss )中的任何内容，因此我们不知道他们到底做了什么，是他们实际编译了我们的scss文件，还是他们在幕后使用了css。

• 当我说源文件时，它是指火狐中的chrome和样式编辑器的源代码面板中显示的文件。

4.最后是，如果您真的想在chrome的源面板中动态编辑 you sass/scss文件，那么您必须查看铬工作区。但是，再一次，您的将不能在检查元素选项卡中对scss属性进行更改。

** 再次指出，使用chrome工作区并不实际将scss编译成浏览器中的css，实际上所发生的情况是浏览器将我们的文件(在源选项卡中)映射到系统文件(某种程度上使浏览器成为我们的代码编辑器)。