如何在引导程序 4 中启用弹性到真正的 scss答案

【问题标题】：How to enable-flex to true scss in bootstrap 4如何在引导程序 4 中启用弹性到真正的 scss
【发布时间】：2017-04-19 15:47:35
【问题描述】：

我有最新版本的 bootstrap with bower。我正在使用 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 我将引导程序定义为 ./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']);

【问题讨论】：

标签： twitter-bootstrap sass flexbox bootstrap-4 twitter-bootstrap-4

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：