Как включить-flex для истинного scss в bootstrap 4

У меня последняя версия бутстрапа с беседкой. Я использую задачу gulp, чтобы передать ее в css. В моем стиле.scss я бегу

@import "bootstrap";
@import "font-awesome";

Все это рабочий файл. Я читаю документацию о том, как включить flexbox здесь: http://v4-alpha.getbootstrap.com/getting-started/flexbox/

В документации сказано: Откройте файл _variables.scss и найдите переменную $enable-flex. Означает ли это, что мне нужно зайти в bower_components/bootstrap/scss/, найти _variables.scss и изменить его там?

Мой глоток. У меня есть начальная загрузка, определенная как ./bower_components/bootstrap/scss

Как мне справиться с этим, не переопределяя все, и, что более важно, как правильно включить flex? Я просто добавляю сюда свой файл gulp на всякий случай.

const gulp = require('gulp'),
     sass = require('gulp-sass'),
     autoprefix = require('gulp-autoprefixer'),
     notify = require("gulp-notify"),
     bower = require('gulp-bower');

let config = {
    bootstrapDir: './bower_components/bootstrap',
    fontawesomeDir: './bower_components/font-awesome',
    publicDir: './public',
    bowerDir: './bower_components'
}

gulp.task('bower', function() {
    return bower()
        .pipe(gulp.dest(config.bowerDir))
});

gulp.task('fonts', function() {
    return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
        .pipe(gulp.dest('./public/assets/fonts'));
});

gulp.task('css', function() {
    return gulp.src('./public/assets/sass/style.scss')
        .pipe(sass({
            includePaths: [config.bootstrapDir + '/scss', config.fontawesomeDir + '/scss'],
        }))
        .pipe(gulp.dest(config.publicDir + '/assets/css'));
});

// Watch task
gulp.task('watch',function() {
    gulp.watch('./public/assets/sass/**/*.scss', ['css']);
});

gulp.task('default', ['bower', 'fonts', 'css']);

person Joseph Chambers    schedule 05.12.2016    source источник


Ответы (2)


В моем случае сработало добавление _custom.scss и @import до того, как я импортировал bootstrap. В Bootstrap есть файл _custom.scss для таких переопределений, но когда вы обновляете bootstrap с помощью Bower, вы теряете эти изменения.

person Joseph Chambers    schedule 06.12.2016

Они должны были добавить частичное _custom.scss к .gitignore. Проверьте комментарий в _custom.scss :

// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.

Переменная $enable-flex определена в частичном _variables.scss.

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L113 https://github.com/twbs/bootstrap/blob/v4-dev/scss/_custom.scss https://github.com/twbs/bootstrap/blob/v4-dev/.gitignore

person Rob Waa    schedule 20.12.2016