1

We are using gulp-sass to compile our SCSS, and using gulp-sourcemaps to generate sourcemaps in our dev environment:

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

Sourcemaps get generated, no issues. When inspecting elements in Chrome DevTools, we can see the source SASS definition, but as soon as we modify an attribute value or selection, we lose the sourcemap and are shown the line in the compiled CSS. See screenshots:

Pre-interaction

Post-interaction

Very annoying and nothing we've tried has fixed this. Any suggestions? Note that in Firefox, we do not see the same issue.

4

1 回答 1

1

症结：您无法在chrome devtools的检查元素面板中修改 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.)最后，如果你真的想在 chrome 的源面板中即时编辑你的 sass/scss 文件，你必须查看chrome 工作区。但话又说回来，您将无法在检查元素选项卡中更改 scss 规则属性。

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

于 2015-05-26T05:56:17.500 回答