在开发项目的时候,调试工具下报出这样一个错误:
DevTools 无法加载来源映射:无法加载 http://localhost:3000/bootstrap.min.css.map 的内容:HTTP 错误:状态代码 404,net::ERR_HTTP_RESPONSE_CODE_FAILURE
明明没有引入 bootstrap.min.css.map 这个文件,为什么会报404呢?
问题排查
因为项目有引入 bootstrap.min.css,会不会是 文件里引入了 bootstrap.min.css.map 这个文件?
于是我先到 bootstrap.min.css 文件里搜索 map 关键词,确实发现了。

bootstrap.min.css中map
在文件的最后一行,我了个去,这个不是注释,应该不会引入才对。
应该是有其他作用,到哪里找呢?既然是 bootstrap,官网应该是有说明才对,到官网上看看先。
果然,官网找到了。官网对其的介绍是:CSS源码映射表,并且还给了一个链接。

bootstrap官网源码映射表
链接是链接到谷歌的地址,估计有些读者打不开。
我整理下意思,大概是这样,划重点了:
就是bootstrap是用less开发的,打包后,bootstrap.min.css 是一个压缩后的文件,只有一行。
在通过调试工具查看某个具体元素的样式的时候,如果点击进去,只有一行,非常不方便。
有了 bootstrap.min.css.map 这个文件,调试工具就能够反映出元素的样式具体在Css源码的位置,比如grid.less。
另外因为这个是调试工具使用的,目前只有谷歌浏览器会出现这样的问题。
解决办法
知道问题后,解决办法就有了,有两个办法:
第一个
一个是把 bootstrap.min.css.map 也一起放到项目目录,这样就OK了。
第二个
直接把 bootstrap.min.css 尾部的这一行注释删除掉就可以了。
第三个
不理它,哈哈。
你会选择哪一个呢?
参考资料:
bootstrap官方:https://v3.bootcss.com/getting-started/
bootstrap.css.map的作用與是否該留或不該留:https://www.minwt.com/webdesign-dev/html/18459.html