最新消息:flex弹性布局更新完毕,阅读地址:http://www.01happy.com/css-flex/

记一次排查bootstrap.min.css.map为404的问题

css 18浏览 0评论

在开发项目的时候,调试工具下报出这样一个错误:

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.min.css中map

在文件的最后一行,我了个去,这个不是注释,应该不会引入才对。

应该是有其他作用,到哪里找呢?既然是 bootstrap,官网应该是有说明才对,到官网上看看先。

果然,官网找到了。官网对其的介绍是:CSS源码映射表,并且还给了一个链接。

bootstrap官网源码映射表

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

转载请注明:快乐编程 » 记一次排查bootstrap.min.css.map为404的问题

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址