Search code examples
phplaravelbootstrap-sasslaravel-elixir

Laravel Elixir includePaths not working


I'm trying Laravel Elixir and want to include bootstrap with includePaths but it does not work. Where am I going wrong?

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

elixir(function(mix) {
    mix.sass("style.scss", 'public/assets/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
});

Solution

  • I'm not sure if there is a reason that you want to do includePaths in your gulpfile, but for bootstrap you don't have to. The bootstrap include path is already configured out of the box in /node_modules/laravel-elixir/ingredients:

    elixir.extend('sass', function(src, output, options) {
    
        options = _.extend({
            outputStyle: inProduction ? 'compressed' : 'nested',
            includePaths: [elixir.config.bowerDir + "/bootstrap-sass-official/assets/stylesheets"]
        }, options);
    
        return compile({
            compiler: 'Sass',
            pluginName: 'sass',
            pluginOptions: options,
            src: src,
            output: output,
            search: '**/*.+(sass|scss)'
        });
    });
    

    So all you should have to do is, in your gulpfile:

    elixir(function(mix) {
        mix.sass("style.scss");
    });
    

    And then in your style.scss:

    @import "bootstrap";
    

    I think you have to set your .bowerrc file to:

    {
      "directory": "vendor/bower_components"
    }
    

    but it looks like you have already done that.