什么是Bootstrap 3.x中使用的.map文件？

Question

文件CSS夹中包含两个文件,其中包含.map文件扩展名.他们是:

bootstrap-theme.css.map
bootstrap.css.map

它们似乎是缩小文件但我不知道它们的用途.

Answer 1

从使用Chrome DevTools中的CSS预处理器:

许多开发人员使用CSS预处理器生成CSS样式表,例如Sass,Less或Stylus.由于生成了CSS文件,因此直接编辑CSS文件并没有那么有用.

对于支持CSS源映射的预处理器,DevTools允许您在"源"面板中实时编辑预处理器源文件,并查看结果,而无需离开DevTools或刷新页面.检查其样式由生成的CSS文件提供的元素时,"元素"面板将显示指向原始源文件的链接,而不是生成的.css文件.

Answer 2

如果您只是想摆脱错误,您还可以删除此行bootstrap.css:

/*# sourceMappingURL=bootstrap.css.map */

Answer 3

这些是源地图.提供这些压缩源文件; Firefox和Chrome等开发人员工具将使用它们来进行调试,就好像代码没有被压缩一样.

Answer 4

引导程序css可以由Less生成.map文件的主要用途是将css源代码链接到chrome dev工具中较少的源代码.正如我们以前那样.如果我们检查chrome dev工具中的元素.你可以看到css的源代码.但是如果在包含bootstrap css文件的页面中包含映射文件.您可以看到适用于您要检查的元素样式的代码较少.

Answer 5

什么是 CSS 地图文件？

它是一个 JSON 格式的文件，将 CSS 文件链接到其源文件，通常是用预处理器（即 Less、Sass、Stylus 等）编写的文件，这是为了对来自 Web 的源文件进行实时调试浏览器。

什么是 CSS 预处理器？示例：Sass、Less、手写笔

它是一个 CSS 生成器工具，它使用编程能力来稳健快速地生成 CSS。

Answer 6

您是否曾经发现自己希望您可以保持客户端代码的可读性,更重要的是可调试性,即使您已经合并并缩小它,而不会影响性能？那么现在你可以通过源地图的魔力.

本文使用实用方法解释源映射.

Answer 7

对于那些来这里寻找这些文件的人(像我一样),你通常可以通过添加.map到URL的末尾找到它们:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.map

请确保使用您正在使用的任何版本的Bootstrap替换该版本.

Answer 8

地图文件（源地图）用于取消引用缩小的代码（css 和 javascript）。

它们主要用于帮助开发人员调试生产环境，因为开发人员通常使用缩小的文件进行生产，这使得调试变得不可能。映射文件帮助他们取消引用代码以查看原始文件的外观。