如何在 bootstrap 4 中启用 flex 到真正的 scss

Question

我有带 Bower 的最新版本 bootstrap。我正在使用 gulp 任务将其通过管道传输到 css。在我的 style.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，然后在那里进行更改？

我的 gulp 我有 bootstrap 定义为 ./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']);

Answer 1

在我的案例中起作用的是在我导入 bootstrap 之前添加一个 _custom.scss 和 @import。 Bootstrap 确实有一个用于此类覆盖的 _custom.scss 文件，但是当您使用 bower 更新 bootstrap 时，您将丢失这些更改。

Answer 2

他们应该将部分 _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

如何在 bootstrap 4 中启用 flex 到真正的 scss

How to enable-flex to true scss in bootstrap 4

twitter-bootstrap

sass

flexbox

bootstrap-4

twitter-bootstrap-4