我们使用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中，我们看不到相同的问题 .
1 回答
Crux ：您无法修改chrome devtools的 inspect element panel 内的scss规则属性 . 但是，我们可以使用chrome工作区编辑chrome的源面板内的源文件（sass / scss） .
我遇到了同样的问题 . 我不得不抓头一整天来解决问题，并在浏览器中编辑我的sass / scss . 这就是：
1.） Sourcemaps are meant for referencing your source files not editing your source files (sass/scss) so that you can debug your code. ，即我们可以引用导致我们编译的css规则但不编辑它的确切行
2.） Chrome 通过立即用编译的css替换你的scss规则来做对，因为chrome与css一起工作 . 它不会编译你的scss .
此外，当您对css规则进行任何更改时，此规则也会在源文件（.css）中也在chrome sources选项卡中进行修改 . 这意味着我们在检查器中进行的更改将直接与我们的css文件进行映射 .
例如：当我在检查器中更改某些属性时，它也会在css源文件中更改 .
Initially
After Changing the property
3.） Regarding Firefox ，你可能会认为它在firefox的情况下工作，但我认为它有点误导 . 它的误导性是因为firefox不知道他们实际做了什么，他们是否实际编译了我们的scss文件或者他们使用了css .
4.） Finally ，如果你真的想 edit 你 sass/scss files on the fly in the source panel of the chrome 你必须调查 chrome workspaces . 但话又说回来 wont 能够在 inspect elements tab 中制作 changes to scss rules properties .
** Again, using chrome workspaces doesn;t actually compiles our scss into css in the browser what actually happens is that the browser maps our files ( in source tab ) to system files ( sort of makes the browser our code editor )