Bootstrap 4 npm包dist目录文件与Scss编译结果为何存在差异？

哦，这个问题我之前也碰到过，其实原因很简单——Bootstrap发布的npm包里的dist/文件是已经预处理完成的成品，而你看的Scss源码是未经编译的原始代码，两者差了一个关键的构建步骤：Autoprefixer自动添加浏览器前缀。

具体来说：

• 你看到node_modules/bootstrap/dist/css/bootstrap.css里的.row包含display: -ms-flexbox、-ms-flex-wrap: wrap这些带前缀的样式，是因为Bootstrap官方在发布包之前，已经用Autoprefixer工具处理过最终的CSS了。这个工具会根据预设的浏览器支持范围，自动为标准CSS属性添加旧浏览器需要的前缀，比如针对IE10/11的-ms-前缀。
• 而Scss源码里的_grid.scss中.row调用的make-row() mixin，只需要写标准的CSS属性（比如display: flex、flex-wrap: wrap）就够了——前缀不需要手动编写，Autoprefixer会在编译阶段自动补全。

如果你自己编译Bootstrap的Scss想要得到和dist/目录完全一致的结果，需要确保你的构建流程满足两个条件：

1. 引入Autoprefixer工具（比如在Webpack、Gulp等构建工具中配置）
2. 使用和Bootstrap官方一致的浏览器支持配置（Bootstrap 4.1.1的目标浏览器包含IE10+、旧版Chrome/Firefox等，你可以查看Bootstrap包根目录的.browserslistrc或者package.json里的browserslist字段）

这样编译出来的CSS就会自动带上必要的浏览器前缀，和官方dist文件一致了。

内容的提问来源于stack exchange，提问作者Ksthawma