为什么在检查元素时只显示css文件？

Question

首先，当我在网页开发过程中使用chrome浏览器检查元素时，它曾经显示确切的scss（css预处理器）文件，其中存在这些样式。这非常有帮助。但是现在当我检查一个元素时，它只显示计算出的css文件。我无法确切了解我的浏览器发生了什么。是否应该更改任何设置？请提出解决方案。

Answer 1

你可能会丢失源地图文件（.map）

从Chrome Devtools Docs：

对于支持CSS源地图预处理程序，DevTools让你 实时编辑您的预处理程序的源文件在“来源”面板中，然后 查看结果，而无需离开DevTools或刷新页面。 当您检查其样式由生成的 CSS文件提供的元素时，元素面板将显示指向原始源 文件的链接，而不是生成的.css文件。

检查Chrome是否精选启用：

CSS源地图默认情况下启用。您可以选择启用 自动重新生成生成的CSS文件。

要启用CSS源地图和CSS重装：

1. 打开DevTools设置，然后单击常规。

2. 打开启用CSS源图和自动重新载入生成的CSS。

大多数现代IDE支持SCSS也生成地图文件，检查你的IDE设置，以确保这些文件在每次编译SCSS代码时创建的。

style.scss compiles into: 
|_ style.css 
|_ style.css.map