.css.map文件作用

.css.map文件作用

1、简介

在写前端代码，使用bootstrap时，发现同一个目录下，不仅仅有.css文件的同时，还存在.css.map文件的存在。在前端页面调试时也发现，映入很多已.less结尾的文件。

将bootstrap-theme.min.css.map文件移除，显示效果如下：

同样的css文件，只不过两次显示的不一样，查阅资料知道，bootstrap是由less写的，less编译后生成css文件，所以如果没有.css.map文件，那么在前端浏览器调试的时候，只会显示编译后css文件所在的样式位置，而存在css.map文件后，就可以知道在less源文件中的样式位置。

2、作用

.css.map是source map文件。
因为bootstrap是用less写的，less会编译成css显示在页面上。
但有个麻烦，浏览器里看的都是css第几排，而你编辑的又是less文件，很难对上。
这个时候有了source map，浏览器里直接显示less，非常方便。