.css.map文件作用

.css.map文件作用

1、简介

在写前端代码,使用bootstrap时,发现同一个目录下,不仅仅有.css文件的同时,还存在.css.map文件的存在。在前端页面调试时也发现,映入很多已.less结尾的文件。
.css.map文件作用
将bootstrap-theme.min.css.map文件移除,显示效果如下:
.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,非常方便。
.css.map文件作用