4

enter image description here 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?

shenkwen
  • 3,536
  • 5
  • 45
  • 85
  • 1
    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 – Towkir Nov 12 '19 at 18:46

2 Answers2

7

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

enter image description here

Jay Ukani
  • 362
  • 4
  • 13
3

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.