怎么样通过Bootstrap已经编译好(压缩好)的源码去查看符合阅读习惯的源码【通过Source Map(源映射)文件实现】

原创于 2023-08-07 21:15:37 发布 · 363 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #html

Bootstrap 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了如何通过官方SourceMap文件将Bootstrap编译后的CSS文件转换为易读的源码，方法是在同一目录下放置CSS、CSS.map文件，并在浏览器开发者模式下查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

阅读本篇博文前，建议大家先看看下面这篇博文：
https://blog.youkuaiyun.com/wenhao_ir/article/details/132089650

Bootstrap经编译(压缩)后的源码百度网盘下载地址：
https://pan.baidu.com/s/14BM9gpC3K-LKxhyLGh4J9Q?pwd=m02m

Bootstrap未经编译(压缩)后的源码百度网盘下载地址：
https://pan.baidu.com/s/19U-13-sgPDHCI0FozreFdQ?pwd=b9m1

我们在web项目中，用Bootstrap开发前端内容时，通常都是引用编译版的文件，如下图这些文件：
在这里插入图片描述
但这些css文件中的源码，是经过编译压缩处理的，如果直接打开，基本上人是无法阅读的，用四川话来说，那真是“一饼粘”，不忍直视，如下图所示：

那怎么办呢？此时我们可以通过官方配套的map文件去进行编译前的反映射，从而获得易于阅读的源代码，如下图所示：
在这里插入图片描述
那么怎么通过Source Map(源映射)文件去看易于阅读的源码文件呢？
很简单，只需要把css文件和对应的css.map文件放于同一文件下，然后浏览器打开相应的HTML文件，进入开发者模式，即可查看易于阅读的源码文件。

示例如下：
在目录"E:\HTML_3"下放入下面三个文件：

css-map-test.html
bootstrap.min.css
bootstrap.min.css.map

这三个文件的百度网盘下载链接如下：
https://pan.baidu.com/s/1ydZiOKESZydtDXuNiNN0Hg?pwd=ppsi

文件 css-map-test.html 的内容如下：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <div class="container">
  <p>我要测试Source Map(源映射)文件的效果。</p>
  </div>
</body>
</html>