Bootstrap CSS Customize with SCSS CSS

Using Bootstrap with Bower

First let's make a package.json file for Node to see. Either use npm init -y or create a package.json file containing just an empty JSON object ({}).

Now let's install gulp, gulp-bower, and gulp-sass:

$ npm install --save-dev gulp gulp-bower gulp-sass

Now let's use Bower to install bootstrap. This will allow us to import Bootstrap into our SCSS code and compile it down to CSS manually.

Create a bower.json file using bower init or by manually creating one:

Now let's install bootstrap-sass with Bower.

$ bower install --save bootstrap-sass




Create One file

Now we can make an SCSS file that includes bootstrap into our project. Let's call our SCSS file css/app.scss:





@import "bootstrap";

@import "bootstrap/theme";




Now let's use gulp to compile our app.scss, which includes Bootstrap SASS:

Create On JS File with gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

var config = {
    bootstrapDir: './bower_components/bootstrap-sass',
    publicDir: './public',
};

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

gulp.task('fonts', function() {
    return gulp.src(config.bootstrapDir + '/assets/fonts/**/*')
    .pipe(gulp.dest(config.publicDir + '/fonts'));
});

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

Now when we run gulp, our compiled Bootstrap CSS should appear in the public/css directory:




Now Output file

package.json

{

  "name": "Bootstrap-4-SASS",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "gulp": "^3.9.1",

    "gulp-bower": "0.0.14",

    "gulp-sass": "^4.0.2",

    "gulp-sourcemaps": "^1.3.0",

    "gulp-uglifyjs": "^0.6.0"

  },

  "dependencies": {

    "node-sass": "^4.9.4"

  }

}

bower.json

{

  "name": "Bootstrap-4 SASS",

  "description": "",

  "main": "index.js",

  "authors": [

    "Lalji <Lalji@prakashinfotech.com>"

  ],

  "license": "ISC",

  "keywords": [

    "Bootstrap",

    "SCSS"

  ],

  "homepage": "",

  "private": true,

  "ignore": [

    "**/.*",

    "node_modules",

    "bower_components",

    "test",

    "tests"

  ],

  "dependencies": {

    "bootstrap-sass": "^3.3.7"

  }

}

gulpfile.js

var gulp = require('gulp');

var sass = require('gulp-sass');

var sourcemaps = require('gulp-sourcemaps');

var uglify = require('gulp-uglifyjs');

var config = {

  bowerDir: './bower_components',

  publicDir: './public',

};

gulp.task('fonts', function() {

  return gulp.src([

    config.bowerDir + '/bootstrap-sass/assets/fonts/**/*',

  ])

  .pipe(gulp.dest(config.publicDir + '/fonts'));

});

gulp.task('js', function() {

  return gulp.src([

    config.bowerDir + '/jquery/dist/jquery.min.js',

    config.bowerDir + '/bootstrap-sass/assets/javascripts/bootstrap.js',

  ])

  .pipe(uglify('app.js', {

    compress: false,

    outSourceMap: true,

  }))

  .pipe(gulp.dest(config.publicDir + '/js'));

});

gulp.task('css', function() {

  return gulp.src('css/app.scss')

  .pipe(sourcemaps.init())

  .pipe(sass({

    outputStyle: 'compressed',

    includePaths: [config.bowerDir + '/bootstrap-sass/assets/stylesheets'],

  }))

  .pipe(sourcemaps.write())

  .pipe(gulp.dest(config.publicDir + '/css'));

});

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

More Info