Skip to content

Instantly share code, notes, and snippets.

@ericlbarnes
Created January 17, 2015 03:33
Show Gist options
  • Save ericlbarnes/c3ab73520bae8f1a83a2 to your computer and use it in GitHub Desktop.
Save ericlbarnes/c3ab73520bae8f1a83a2 to your computer and use it in GitHub Desktop.
Laravel Elixir With Bootstrap Sass
{
"directory": "vendor/bower_components"
}
{
"name": "Laravel Application",
"dependencies": {
"bootstrap-sass-official": "~3.3.1"
}
}
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');
});
@subdesign
Copy link

Adding @Impot "bootstrap"; to my top of styles.scss gives:

[14:50:14] gulp-notify: [Laravel Elixir] Sass Compilation Failed!: file to import not found or unreadable: bootstrap
Current dir: /var/www/project/resources/assets/sass/

@subdesign
Copy link

ok, this isn't good, too:
includePaths: [paths.bootstrap + 'stylesheets/'
have to be
includePaths: [paths.bootstrap + 'stylesheets'
so without the ending forthslash

@garretto
Copy link

garretto commented Apr 1, 2015

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', './');
});

@gomako
Copy link

gomako commented Apr 6, 2015

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.

@bzelba
Copy link

bzelba commented Apr 7, 2015

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.

@sandeepseshadri
Copy link

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

@ericlbarnes
Copy link
Author

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

@lukasmalkmus
Copy link

@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?

@mahmoudfci93
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment