487

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

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

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

4

8 回答 8

490

来自在 Chrome DevTools 中使用 CSS 预处理器：

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

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

于 2014-02-01T22:50:28.427 回答
191

如果你只是想摆脱错误，你也可以删除这一行bootstrap.css：

/*# sourceMappingURL=bootstrap.css.map */
于 2014-07-18T22:56:18.423 回答
76

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

于 2014-02-01T22:45:03.793 回答
11

引导 css 可以由 Less 生成。map 文件的主要用途是用于将 css 源代码链接到 chrome dev 工具中的 less 源代码。正如我们过去所做的那样。如果我们在 chrome 开发工具中检查元素。你可以看到css的源代码。但是如果在带有引导 css 文件的页面中包含地图文件。您可以看到适用于您要检查的元素样式的较少代码。

于 2014-07-07T03:16:23.903 回答
11

什么是 CSS 地图文件？

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

什么是 CSS 预处理器？示例：Sass、Less、Stylus

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

于 2019-01-07T09:36:21.023 回答
8

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

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

请务必使用您正在使用的任何版本的 Bootstrap 替换该版本。

于 2016-10-24T14:42:33.980 回答
8

您是否曾经发现自己希望即使在合并和缩小客户端代码之后也可以保持客户端代码的可读性和可调试性，而不会影响性能？那么现在你可以通过源地图的魔力了。

本文使用实用的方法解释 Source Maps。

于 2017-04-19T15:47:47.037 回答
8

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

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

于 2020-07-01T08:41:20.113 回答