Why sometimes Chrome Dev Tool shows scss file instead of compiled css file?

Question

As the above image shows, while inspecting some elements, the Chrome Dev Tool shows it is related with a .scss file, when I click the file, it is empty. I test it with Safari on macOS, it also shows this scss file but when clicked, it correctly shows the content of this scss file. It seems the dev tool is somehow bugged here.

Anyway, my question is, on what condition would Chrome Dev Tools(and the like) shows scss file instead of compiled css file?

Anchoveta

those scss files has a source map files generated while compiling to css, you can find them right beside the actual scss or the css files – Spinal

Answer 1

You do not have to show the scss file please uncheck Enable CSS source maps checkbox

1. Step-1:- Please open chrome Developer tools
2. Step-2:- Press F1 key
3. Step-3:- uncheck Enable CSS source maps checkbox

Hanrahan

Answer 2

That is because a typography.css.map file is present in the same directory as the typography.css file. Chrome recognizes this map file and displays typography.scss instead of typography.css. This also works for mozilla too.

Borglum

I happens without that. Please see the accepted answer. – Bandbox