Как в bootstrap 4 отключить ненужные элементы?

Question

[Stacy None]

Например в 3 версии bootstrap можно было ненужное отключить просто поставив или убрав галочку

А где такая страница в 4 bootstrap? Или как удалить ненужное в bootstrap4 и настроить его под себя?

Answer 1

[Антон Спирин]

Используйте SCSS исходники. Их можно легко настроить и подключить только нужное.

Comments

[Stacy None]

Я не знаю как они работают. Ищу в интернете, не могу найти то что нужно. Подскажите пожалуйста их как-то нужно компилировать?

[Антон Спирин]

Stacy None, тут вам может помочь gulp + gulp-sass.
Для настройки bootstrap надо подключить свой файл переменных до бутстраповского и переопределить то что вам нужно. Ничего сложного.

// ваши переменные
@import "config/bootstrap-variables";
// переменные bootstrap
@import "bootstrap/variables";
... // далее все, что хотите использовать из bootstrap
// ваши стили
@import "main";

Как-то так.

[Антон Спирин]

Stacy None, примерный gulpfile

const gulp = require('gulp'),
      path = require('path'),
      sourcemaps = require('gulp-sourcemaps'),
      uglify = require('gulp-uglify'),
      autoprefixer = require('gulp-autoprefixer'),
      sass = require('gulp-sass'),
      globImport = require('gulp-sass-bulk-import'),
      moduleImporter = require('sass-module-importer'),
      cleanCSS = require('gulp-clean-css'),
      glob = require('glob');

const paths = {
  'styles': {
    'src': './web/src/scss/*.scss',
    'all': './web/src/scss/**/*.scss',
    'dest': './web/css/'
  }
};

gulp.task('sass:dev', () => {
  gulp.src(paths.styles.src)
    .pipe(sourcemaps.init())
    .pipe(globImport())
    .pipe(sass({ importer: moduleImporter() }).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(cleanCSS({compatibility: 'ie11'}))
    .pipe(sourcemaps.write('.', { sourceRoot: paths.styles.src }))
    .pipe(gulp.dest(paths.styles.dest));
});

gulp.task('sass:prod', () => {
  gulp.src(paths.styles.src)
    .pipe(globImport())
    .pipe(sass({ importer: moduleImporter() }).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(cleanCSS({compatibility: 'ie11'}))
    .pipe(gulp.dest(paths.styles.dest));
});
gulp.task('sass', ['sass:dev']);
gulp.task('watch:sass', () => gulp.watch(paths.styles.all, ['sass:dev']));
gulp.task('build:dev', [''sass:dev']);
gulp.task('build:prod', ['sass:prod']);
gulp.task('default', ['build:dev', 'watch']);

[Stacy None]

Разобрался. Спасибо!