Bootstrap 4 npm包带有dist /不同于scss /？

Question

npm package.json "bootstrap": "^4.1.1",

node_modules/bootstrap/dist/css/bootstrap.css
.row {
  display: -ms-flexbox;  // note this line
  display: flex;
  -ms-flex-wrap: wrap;  // note this line
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

scss中的对应行是

node_modules/bootstrap/scss/_grid.scss
.row {
  @include make-row();
}

make-row mixin来自

node_modules/bootstrap/scss/mixins/_grid.scss
@mixin make-row() {
  display: flex;
  flex-wrap: wrap;
  margin-right: ($grid-gutter-width / -2);
  margin-left: ($grid-gutter-width / -2);
}

差分

这两行不在mixin中，你不会在scss源编译的css中看到它们。

display: -ms-flexbox;
-ms-flex-wrap: wrap;

观察

1. 将已编译的css与包dist /中的css区分开来，您将看到95％的diff行缺少与flex相关的行。

2. node_modules/bootstrap/scss只是不包含任何＆＃39; ms-flex＆＃39;

3. 由于缺少弹性线，当使用自编译的css时，this kitchen sink在IE10上失败 - 网格，媒体对象和左右流的所有内容。它在codepen上看起来不错，因为它使用CDN dist / css

4. 我需要自定义引导程序，例如更改原色，并自行构建。

问题

如何使自编编码的css与dist /？

中的css相同

信息：我使用gulp-compass进行编译。

Answer 1

问题在于Bootstrap使用autoprefixer模块（并且您的编译器例程不会），因此每个特定供应商前缀会自动添加到css。例如，如果您使用：display: flex;，则会自动添加Internet Explorer 11的前缀：display: -ms-flexbox;。 autoprefixer将自动为所有需要的属性添加所有供应商前缀。

这是一个很好的做法，因此您不必费心记住所有不同浏览器的所有前缀。几乎每个编译器都可以找到autoprefixers。

在您的情况下，您可以使用gulp-autoprefixer npm包（more info）。

您应首先运行以下命令来安装软件包：npm install --save-dev gulp-autoprefixer;那么您应该对Gulpfile.js添加一些修改：

1. 加载autoprefixer模块：var prefixer = require('gulp-autoprefixer');。
2. 将它管道：.pipe(prefixer())到您当前的bootstrap编译管道。

您可以将所需的目标浏览器作为autoprefixer params传递，例如：prefixer({ browsers: ['last 2 versions', 'ie >= 10'] })，以匹配最近2个版本的浏览器和Internet Explorer 10或更高版本。

希望它有所帮助。