为什么有时 Chrome 开发工具会显示 scss 文件而不是编译后的 css 文件？答案

【问题标题】：Why sometimes Chrome Dev Tool shows scss file instead of compiled css file?为什么有时 Chrome 开发工具会显示 scss 文件而不是编译后的 css 文件？
【发布时间】：2020-03-08 12:36:50
【问题描述】：

如上图所示，在检查某些元素时，Chrome 开发工具显示它与一个 .scss 文件相关，当我单击该文件时，它是空的。我在 macOS 上使用 Safari 对其进行了测试，它也显示了这个 scss 文件，但是当单击它时，它正确地显示了这个 scss 文件的内容。似乎开发工具在这里出现了某种错误。

无论如何，我的问题是，Chrome 开发工具（等）在什么情况下会显示 scss 文件而不是编译后的 css 文件？

【问题讨论】：

这些 scss 文件在编译成 css 时会生成源映射文件，您可以在实际的 scss 或 css 文件旁边找到它们

标签： css google-chrome google-chrome-devtools scss-mixins

【解决方案1】：

这是因为typography.css.map 文件与typography.css 文件位于同一目录中。 Chrome 会识别此地图文件并显示 typography.scss 而不是 typography.css。这也适用于 Mozilla。

【讨论】：

我碰巧没有那个。请查看已接受的答案。

【解决方案2】：

您不必显示 scss 文件，请取消选中启用 CSS 源映射复选框

第 1 步：-请打开 chrome 开发者工具
第二步：-按F1键
第 3 步：- 取消选中 启用 CSS 源映射 复选框

【讨论】：