为啥 chrome 样式检查器显示来自 .scss 的样式？

Posted 2023-03-07

【中文标题】为啥 chrome 样式检查器显示来自 .scss 的样式？

【英文标题】：Why does chrome style inspector show style from .scss?为什么 chrome 样式检查器显示来自 .scss 的样式？

【发布时间】：2017-09-05 01:14:55

【问题描述】：

当我使用 Google Chrome 开发者工具的“样式”标签时，它会报告我的其中一种样式来自 .scss 文件。这怎么可能 - 我认为所有 .scss 都必须被展平并从 .css 文件中读取：

【问题讨论】：

Chrome 支持source maps。

【参考方案1】：

当你将你的 sass 编译成 css 时，你可以选择生成一个源映射文件。在 css 文件的末尾，您将找到一个地图文件的引用，该文件将位于与 css 相同的文件夹位置，扩展名为 .map。

chrome 检查器使用它来帮助开发。您可以在 chrome 检查器中将其关闭，或者仅从 css 中删除对源映射的引用，或者首先删除生成源映射的选项。

如果您只想让 chrome 显示 css 并且乐于保留源映射文件，您可以关闭该选项。要关闭 Chrome 开发人员工具中的选项，请打开检查器并转到设置。查看 Preferences 部分中的 Sources 类别，然后取消选中“Enable css source maps”

【讨论】：

这个聚会晚了几年，但反响很好！

优秀的答案；无需多言。