如何获取或生成Font Awesome 5.3.1的font-awesome.min.css对应.map文件？

你的问题完全合理 #

.map 文件的核心作用就是映射压缩后的代码（不管是 CSS 还是 JS）到未压缩的源码，方便调试和阅读，你之前处理 JS 压缩文件的经验完全适用在 CSS 上，这个思路没问题。

生成对应 .map 文件的方法 #

你可以通过以下步骤生成 5.3.1 版本对应的 .map 文件：

1. 获取官方未压缩的 CSS 源码：在你之前访问的 GitHub 5.3.1 版本发布页中，下载「Source code」压缩包，解压后在 css 目录里找到未压缩的 font-awesome.css 文件。
2. 使用 CSS 压缩工具重新生成带 Source Map 的压缩文件：
   • 先全局安装 clean-css 命令行工具：npm install -g clean-css-cli
   • 执行命令生成压缩文件和对应 map：cleancss -o font-awesome.min.css --source-map=filename:font-awesome.min.css.map font-awesome.css
     这个命令会基于官方未压缩源码生成和原版一致的压缩 CSS，同时产出对应的 .map 文件。

补充相关知识 #

• Source Map 是压缩工具在压缩过程中生成的，并非所有开源项目的发布包都会附带，部分旧版本可能仅在源码包里提供生成所需的原始文件。
• 替代方案：如果暂时不想折腾 .map 文件，可以直接在开发环境替换成未压缩的 font-awesome.css，调试完成后再换回压缩版，同样能解决可读性问题。

内容的提问来源于stack exchange，提问作者Aleix Mariné