How can a browser know the scss files?

Question

I see this html template, and inspect it using Chrome inspection tool.
I'm surprised to know that my browser can detect the scss files instead of the compiled css one. Then, I push Ctrl+U to view the page source, try to find 'scss' but it gives nothing in result.
So, how does the browser know the scss files?

P.S. I'm new to scss/sass/css pre-processor things

Answer 1

You can read this article for more about Sourcemaps: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

This is mainly used for debugging and most of the times is stripted from production environments (in this case I guess they left it for people to check the actual source code and learn as you did :P)

Answer 2

What you are seeing is called Sourcemaps. Sourcemaps allow you to see the original source instead of the compiled CSS. This is usually used for debugging.