Correctly configure Laravel 5 Elixir to compile .scss files

Question

I am trying to use Laravel elixir to compile a simple sass file app.scss which is in my resources > assets > sass directory. I have node, gulp and elixir installed and my gulpfile.js file looks like this...

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.
 |
 */

elixir(function(mix) {
    mix.sass('app.scss');
});

However when I am running gulp I am getting some strange errors. I first tried with a simple sass file with no includes...

body {
    padding-top: 40px;
}

body, label, /checkbox label {
    font-weight: 300px;
}

I am getting this error from my terminal...

[14:44:40] Starting 'default'...
[14:44:40] Starting 'sass'...
[14:44:41] Finished 'default' after 1.45 s
[14:44:41] gulp-notify: [Laravel Elixir] Error: invalid top-level expression
[14:44:41] Finished 'sass' after 1.47 s
[14:44:41] gulp-notify: [Error running notifier] Could not send message: not found: notify-send

And when I add @include 'pages/home'; to the top of my app.scss file (and pages > home.scss does exist) I get the following error...

[14:38:03] Starting 'default'...
[14:38:03] Starting 'sass'...
[14:38:04] Finished 'default' after 1.42 s
[14:38:04] gulp-notify: [Laravel Elixir] Error: invalid name in @include directive
[14:38:04] Finished 'sass' after 1.44 s
[14:38:04] gulp-notify: [Error running notifier] Could not send message: not found: notify-send

I know the notifier error is because I am running it in a VM so that doesn't bother me but the previous errors are resulting in no sass being compiled at all.

If it helps I'm running Laravel 5 on Mac with OSX Mavericks using homestead as an environment.

The strange thing is that I had this working before and I just started a new Laravel project and all of a sudden it wont work. Does anyone know what's going on?

lukasgeiter lukasgeiter · Accepted Answer · 2015-02-27T15:14:57

The first error is probably caused by the / in body, label, /checkbox label { Remove the slash and it should work.

The second one is because you are using @include when you actually want to @import.

@import is for including other sass/css files. @include is for using mixins.

Correctly configure Laravel 5 Elixir to compile .scss files

1 Answers