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

Question

首先，当我在 web 开发期间检查 chrome 浏览器中的元素时，它用于显示存在这些样式的确切 scss(css 预处理器)文件。这很有帮助。但是现在当我检查一个元素时，它只显示计算的 css 文件。我无法确切地弄清楚我的浏览器发生了什么。是否应该更改任何设置？请提出解决方案。

Answer 1

您可能缺少源映射文件 (.map)

来自 Chrome Devtools Docs :

For preprocessors that support CSS source maps, DevTools lets you live-edit your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file.

检查 Chrome 是否启用了该功能:

CSS source maps are enabled by default. You can choose to enable automatic reloading of generated CSS files.

To enable CSS source maps and CSS reload:

1. Open DevTools Settings and click General.

2. Turn on Enable CSS source maps and Auto-reload generated CSS.

大多数支持 SCSS 的现代 IDE 也会生成映射文件，请检查您的 IDE 设置以确保每次编译 SCSS 代码时都会创建这些文件。

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