0

私は、バウアーでブートストラップの最新バージョンを持っています。私はgulpタスクを使ってそれをcssにパイプしています。私のスタイルで.scss私は実行中ですブートストラップで真のscssを有効にする方法4

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

すべてこれは作業ファイルです。 http://v4-alpha.getbootstrap.com/getting-started/flexbox/

ドキュメントには、_variables.scssファイルを開き、$ enable-flex変数があります。これは、私がbower_components/bootstrap/scss /に行き、_variables.scssを見つけてそれを変更する必要があるということですか?

私の一気私は、すべてを上書きせずにこれを扱うか、そしてもっと重要なのは、どのように私はきちんとフレックス有効にはどうすればよい

が./bower_components/bootstrap/scssのように定義ブートストラップがありますか?私はちょうどそれが必要な場合に備えて、私のガンプファイルをここに追加しています。

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']); 

答えて

1

私のケースでは、ブートストラップをインポートする前に_custom.scssと@importを追加していました。ブートストラップにはそのようなオーバーライドの_custom.scssファイルがありますが、ブートストラップをbowerで更新すると、その変更が緩和されます。

0

_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

関連する問題