What is a .map (source-map) file

If your ever wondered why some of your css styles are not reflecting on the page. If you’re like me, you would open the dev-tools in the Chrome browser and try to find what’s happening, thereafter you will look at the line number, won’t you?

This is where source maps helps us.

Browser won’t understand scss, it only know how to render based on CSS. So, it uses .css files, but you won’t open any .css file while you’re working with SASS. So how to know the .scss filename and line number through browser dev tools?. This is the problem source maps are going to solve.

They tells the browser what is the .scss filename and line number inside .scss file of any particular css rule. And the result is, you can work with SASS easily while the browser too helps you for debugging.

You can configure to not generate this .map file, but it is not recommended.