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

文件CSS夹中包含两个文件，扩展名为.map。他们是：

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

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

从使用Chrome DevTools中的CSS预处理器开始：

许多开发人员使用CSS预处理程序（例如Sass，Less或Stylus）生成CSS样式表。因为生成了CSS文件，所以直接编辑CSS文件没有帮助。

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

如果您只想摆脱错误，也可以在bootstrap.css以下位置删除此行：

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

这些是源地图。在压缩的源文件旁边提供这些文件；Firefox和Chrome中的开发人员工具将使用它们来进行调试，就像未压缩代码一样。

引导css可以由Less生成。映射文件的主要目的是在chrome dev工具中将css源代码链接到较少的源代码。就像以前一样。如果我们在chrome dev工具中检查元素。您可以看到css的源代码。但是如果在页面中包含带有引导CSS文件的地图文件。您会看到较少的代码，这些代码适用于您要检查的元素样式。

您是否曾经发现自己希望即使合并并精简了客户端代码，也可以保持客户端代码的可读性和更重要的是可调试性，而又不影响性能？好了，现在您可以通过源映射的魔力了。

本文使用一种实用的方法解释了源地图。

对于来这里寻找这些文件的任何人（就像我一样），通常可以通过.map在URL末尾添加找到它们：

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

确保使用您使用的任何版本的Bootstrap替换该版本。

什么是CSS地图文件？

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

什么是CSS预处理器？例如：Sass，Less，Stylus

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

如果您想知道为什么使用Bootstrap 3.x缺少映射文件；确保您安装了正确的版本。我必须加载3.3.7才能获得想要的效果。