Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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');
});
@ericbarnes

This comment has been minimized.

Show comment Hide comment
@ericbarnes

ericbarnes Jan 17, 2015

This gist is for the following tutorial: Setting up Laravel Elixir with Bootstrap

Also see the update on a simpler way of implementing all these tools:
Setup Bootstrap Sass with Laravel Elixir

Owner

ericbarnes commented Jan 17, 2015

This gist is for the following tutorial: Setting up Laravel Elixir with Bootstrap

Also see the update on a simpler way of implementing all these tools:
Setup Bootstrap Sass with Laravel Elixir

@guangbochen

This comment has been minimized.

Show comment Hide comment
@guangbochen

guangbochen Feb 10, 2015

For people whoever find this script not working as expected, you have to

  1. add @import "bootstrap"; to the header of your style.scss file
  2. update mix.scripts last line from ], './', 'public/js/app.js'); to ], 'public/js/app.js', './');

For people whoever find this script not working as expected, you have to

  1. add @import "bootstrap"; to the header of your style.scss file
  2. update mix.scripts last line from ], './', 'public/js/app.js'); to ], 'public/js/app.js', './');
@davidangel

This comment has been minimized.

Show comment Hide comment
@davidangel

davidangel Feb 16, 2015

This is cool. Thanks!

This is cool. Thanks!

@jtan1ph

This comment has been minimized.

Show comment Hide comment
@jtan1ph

jtan1ph Feb 21, 2015

scripts generated after following guangbochen but I get error of gulp-notify, error gone only after renaming style.scss to app.scss

jtan1ph commented Feb 21, 2015

scripts generated after following guangbochen but I get error of gulp-notify, error gone only after renaming style.scss to app.scss

@bobbybouwmann

This comment has been minimized.

Show comment Hide comment
@bobbybouwmann

bobbybouwmann Mar 22, 2015

@jtan1ph You need to run gulp on your local development environment and not inside your VM. The VM can't handle the notifications for you

@jtan1ph You need to run gulp on your local development environment and not inside your VM. The VM can't handle the notifications for you

@subdesign

This comment has been minimized.

Show comment Hide comment
@subdesign

subdesign Mar 31, 2015

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/

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

This comment has been minimized.

Show comment Hide comment
@subdesign

subdesign Mar 31, 2015

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

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

@garretto

This comment has been minimized.

Show comment Hide comment
@garretto

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

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

This comment has been minimized.

Show comment Hide comment
@gomako

gomako 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.

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.

@garlian

This comment has been minimized.

Show comment Hide comment
@garlian

garlian 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.

garlian 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

This comment has been minimized.

Show comment Hide comment
@sandeepseshadri

sandeepseshadri May 26, 2015

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

@ericbarnes

This comment has been minimized.

Show comment Hide comment
@ericbarnes

ericbarnes Oct 19, 2015

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

Owner

ericbarnes commented Oct 19, 2015

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

@lukasmalkmus

This comment has been minimized.

Show comment Hide comment
@lukasmalkmus

lukasmalkmus Dec 22, 2015

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

@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

This comment has been minimized.

Show comment Hide comment
@mahmoudfci93

mahmoudfci93 Apr 20, 2017

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

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