Laravel Elixir With Bootstrap Sass

.bowerrc

{
  "directory": "vendor/bower_components"
}

bower.json

{
  "name": "Laravel Application",
  "dependencies": {
    "bootstrap-sass-official": "~3.3.1"
  }
}

gulpfile.js

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

/*
 |----------------------------------------------------------------
 | Have a Drink!
 |----------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic
 | Gulp tasks for your Laravel application. Elixir supports
 | several common CSS, JavaScript and even testing tools!
 |
 */

var paths = {
	'jquery': './vendor/bower_components/jquery/',
	'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}

elixir(function(mix) {
    mix.sass("style.scss", 'public/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
        .copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts')
        .scripts([
            paths.jquery + "dist/jquery.js",
            paths.bootstrap + "javascripts/bootstrap.js"
        ], './', 'public/js/app.js');
});

Wow, this tutorial and code has all kinds of problems.

• Adding the --save flag will not work unless a bower.json file already exists. You can run bower init before that command to walk you through that.
• I would just import bootstrap directly in style.scss so that if your editor doesn't get upset at you if you have a linter.

@import '../../../vendor/bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';

• The last two parameters of the scripts call are mixed around. This is what my gulpfile.js looks like as a result.

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

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Less
 | file for our application, as well as publishing vendor resources.
 |
 */

var paths = {
    jquery: 'vendor/bower_components/jquery/',
    bootstrap: 'vendor/bower_components/bootstrap-sass-official/assets/'
}

elixir(function(mix) {
    mix.sass('style.scss', 'public/css/')
        .copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts')
        .scripts([
            paths.jquery + 'dist/jquery.js',
            paths.bootstrap + 'javascripts/bootstrap.js'
        ], 'public/js/app.js', './');
});

I had all kinds of issues with this, some of it fixed by the above comment, but mainly my sass wasn't working at all.

According to the docs, calling mix.sass will assume a directory structure like this:

resources/assets/sass/

I couldn't override this by using ./path-to-bootstrap so I just made a sass directory with style.scss in in, moved bootstrap-sass-official to the resources/assets dir and pointed my import that way.

Hope that helps someone and saves them the couple of hours I wasted.

If you have pixel related bugs in bootstrap like input group elements not aligning well you may try passing a precision of 8 for proper sass calculation.

Just pass it via the options object as an attribute in the elixir sass function.

I am getting the following error when i run gulp, any help will be appreciated. I tried running it on my VM as well as my windows command line

$ gulp
[21:34:03] Using gulpfile /var/www/resource_manager/gulpfile.js
[21:34:03] Starting 'default'...
[21:34:03] Starting 'sass'...
[21:34:03] Running Sass: resources/assets/sass/style.sass
[21:34:04] 'sass' errored after 262 ms
[21:34:04] Error: libsass bindings not found in /var/www/resource_manager/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass/vendor/linux-x64-14/binding.node. Try reinstalling node-sass?
at Object.sass.getBinaryPath (/var/www/resource_manager/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass/lib/extensions.js:148:11)
at Object. (/var/www/resource_manager/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:16:36)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/var/www/resource_manager/node_modules/laravel-elixir/node_modules/gulp-sass/index.js:157:21)
at Module._compile (module.js:460:26)
Error running task sequence: { task: 'sass',
message: 'sass catch',
duration: 0.262067425,
hrDuration: [ 0, 262067425 ],
err: [Error: libsass bindings not found in /var/www/resource_manager/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass/vendor/linux-x64-14/binding.node. Try reinstalling node-sass?] }
[21:34:04] Finished 'default' after 277 ms

I published an update on this tutorial that greatly simplifies everything:
Setup Bootstrap Sass with Laravel Elixir

@ericbarnes Your new article about including bootstrap -sass is great! I just tried it, because my way of including front-end dependencies was... well.... shit :) However, I'm still curious if there is a way to implement font-awsome in a similar fashion (with npm). Or do I need to stick with bower?

after that installation ,how can i include bootstrap template into my application??