Пакет 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();
}

Миксин из линейки * от 1008 *

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);
}

---

Разница

Эти две строки не включены в миксин, и вы не увидите их в CSS, скомпилированном из источника scss.

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

---

Наблюдения

1. Разместите ваш скомпилированный CSS в css в пакете dist /, вы увидите, что в 95% линий diff отсутствуют строки, относящиеся к flex.

2. node_modules/bootstrap/scss просто не содержит ни одной строки 'ms-flex'.

3. Из-за отсутствия гибких линий эта кухонная раковина не работает на IE10 при использовании самоскомпилированного CSS - Grid, Media Object и всего, что касается потока слева-справа. Он хорошо смотрится на codepen, поскольку использует CDN dist / css

4. Мне нужно настроить загрузчик, например, изменить основной цвет и создать его самостоятельно.

---

Вопрос

Как сделать самоскомпилированный CSS такой же, как в dist /?

Информация: я использую gulp-compass для компиляции.

Answer 1

Проблема в том, что Bootstrap использует модуль autoprefixer (а ваша подпрограмма компилятора этого не делает), поэтому префикс каждого конкретного поставщика добавляется в css автоматически. Например, если вы используете: display: flex;, префикс для Internet Explorer 11 будет добавлен автоматически: display: -ms-flexbox;. Автоматический префикс автоматически добавит все префиксы вендора для всех свойств, которым он нужен.

Это хорошая практика, поэтому вам не нужно беспокоиться о запоминании всех префиксов для разных браузеров. Вы можете найти автоприставки практически для каждого компилятора.

В вашем случае вы можете использовать пакет gulp-autoprefixer npm ( больше информации ).

Сначала вы должны установить пакет, выполнив следующую команду: npm install --save-dev gulp-autoprefixer; тогда вам следует добавить несколько модификаций к вашему Gulpfile.js:

1. Загрузить модуль авторефиксера: var prefixer = require('gulp-autoprefixer');.
2. Передайте это по трубопроводу: .pipe(prefixer()) к вашей текущей bootstrap компиляции.

Вы можете передать желаемые целевые браузеры в качестве параметров автофиксатора, например: prefixer({ browsers: ['last 2 versions', 'ie >= 10'] }), чтобы соответствовать последним 2 версиям браузеров и Internet Explorer версии 10 или более поздней.

Надеюсь, это поможет.