Laravel Elixir: Gulp won't compile Bootstrap Sass files

Question

So I started with Laravel 5, Elixir and Bower and followed the guide published on laravel-news.

I managed to compile all scripts but Gulp won't compile the Bootstrap Sass files even if it says Finished 'sass' after 228 ms. This is what I have in my gulpfile atm:

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

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

But when I run gulp there is no css directory with the css file in it.
What could the problem be? I really don't know what's the problem.

I'm running on Mac OSX (10.10), MAMP and updated all apps, dependencies etc.
As stated in this stackoverflow post I checked if Elixir is the latest version and it is (* and no specific version).

Is there a way to debug Elixir? I have not found anything about this.

---

Solution posted in this answer

Answer 1

Solution:
It wasn't the wrong path but more that I misunderstood the documentation of the function. The includePaths: does not tell Sass to include them into the CSS file. It tells Sass where to look for files that were imported with @import.

gulpfile.js

var bower_path = "./vendor/bower_components";
var paths = {
  'jquery'     : bower_path + "/jquery/dist",
  'bootstrap'  : bower_path + "/bootstrap-sass-official/assets",
  'fontawesome': bower_path + "/fontawesome"
};

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

resources/assets/sass/app.scss

@import "bootstrap";
@import "font-awesome";

With this code I was able to compile a CSS file.

The complete code can be found at the InvoicePlane repo at Github.

Answer 2

I think the problem is your path.

According to the documentation, your scss file is assumed to be in resources/assets/sass. Elixir's default config path for bower is vendor/bower_components, which is what you seem to be trying to point to as well. If you need to change it, just create an elixir.json file in the root of the project with a new bower path.

{
  bowerDir: 'your/new/path'
}

Bootstrap's scss is already included in Elixir's ingredients/sass.js.

includePaths: [elixir.config.bowerDir + "/bootstrap-sass-official/assets/stylesheets"]

Also, you're including the default css output path in your sass() argument. So if your custom scss file is resources/assets/scss/style.scss and vendor/bower_components/bootstrap-sass-official/assets/stylesheets is a valid path you should just need

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

and it will compile your scss into public/css. In my experience, my bower installs have gone into /bower_components. I think the beta release of Laravel that that tutorials was based off of included a .bowerrc file, which tells bower to install libraries in the vendor directory. In a stable install, I don't have the .bowerrc file. Hope this helps!

Answer 3

Another solution is using this line to compile sass or less files sitting in your vendor folder:

mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less");

Note: I used "composer require twbs/boostrap" to get the complete package. No bower needed.

Edit:

I output the compiled css file to the resource folder to combine it with other css files:

mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less", 'resources/css');


mix.styles([
    "bootstrap.css"
], 'public/css/app.css');