Search code examples
twitter-bootstrapgulpbootstrap-4

Correct way to use Bootstrap4 with gulp


I just wonder, what is the correct way to use Bootstrap 4 scss with gulp?

Here's my gulpfile.js:

gulp.task('sass', function(){
    return gulp.src([
        'scss/app.scss'
    ])
        .pipe(sass()) // Converts Sass to CSS with gulp-sass
        .pipe(CleanCSS())
        .pipe(gulp.dest('css'))
});

Then app.scss looks this way:

// Import full bs4 after custom overriden variables
@import "node_modules/bootstrap/scss/bootstrap";

bootstrap.scss itself imports all bs modules.

Is this the "right way"?

Or should i compile bs scss files without importing it in my app.scss:

gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss'])
        .pipe(sass())
        .pipe(gulp.dest("css"))
});

Solution

  • I found the best way is to copy your assets outside of node_modules because backend developers won't bother install nodejs at all.