CODEWITHSUNDEEP
cssgoogle-chromegoogle-chrome-devtoolsscss-mixins
shenkwen
shenkwen

Reputation: 3870

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

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?

Upvotes: 5

Views: 3294

Answers (2)

user12742856
user12742856

Reputation:

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.

Upvotes: 3

Jay Ukani
Jay Ukani

Reputation: 442

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

Upvotes: 15

Related Questions