Bootstrap Sass in Laravel 5

Laravel 5 ships with Bootstrap 3 by default, but it uses Less and not Sass. Personally I prefer Sass over Less and this article helps you set up Bootstrap Sass using Bower and Laravel Elixir.

You can delete the less folder within ‘resources/assets’ as no longer we are going to need it. Now we are going to install Bootstrap Sass using bower. Initialize bower with bower init command. This gets few inputs and will produce the bower.json file.

Now you can add the dependency bootstrap-sass-official to the bower.json file or simply run the following command.

bower install bootstrap-sass-official --save

Run npm install from command line to install Gulp and Laravel Elixir dependencies.

Create a folder named sass within resources/assets and create a file within sass folder named app.scss. Fill in the following to import bootstrap in that file.

@import 'bootstrap';

Now, we are going to replace the script in gulpfile.js with the following script which compiles Bootstrap Sass and places it at the public folder.

var elixir = require('laravel-elixir');

var bower_path = './bower_components';

var path = {
	'bootstrap' : bower_path + '/bootstrap-sass-official/assets'
}

elixir.config.sourcemaps = false;

elixir(function(mix) {

	// Complie Sass by giving includePaths
    mix.sass('app.scss', null, {
    		includePaths : [ path.bootstrap + '/stylesheets' ]
    		}
    	);

    //Copy font files to public/fonts
    mix.copy(path.bootstrap + '/fonts/bootstrap', 'public/fonts');

    }
);

Now run gulp from the root of the project direcory. That’s it.