0

I've just started using Laravel 5.0 and noticed it comes installed with Gulp and it's own library called Elixir. Looks good, however I'm having trouble including libraries such as Susy and Breakpoint to run with it.

In a typical Gulp setup I would pipe it in my styles task like this using gulp-ruby-sass:

.pipe(sass({ style: 'compact', require: ['susy', 'breakpoint'], "sourcemap=none": true }))

However, I've been unable to do something similar with Elixir. Has anyone come across a solution for this?

Currently the Elixir style task in my gulp file is like so:

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

Any advice would be greatly appreciated.

Thanks!

Liam Chapman
  • 140
  • 3
  • 10

2 Answers2

1

You can pass in node-sass options as the third parameter.

elixir.extend('sass', function(src, output, options)

So something like...

elixir(function(mix) {
    mix.sass('main.scss', undefined, {
        outputStyle: 'compact'
    });
});
LZNPDE
  • 164
  • 2
  • 8
1

It doesn't seem like susy CSS framework work out of the box with gulp-sass in elixir. I had to install the "laravel-elixir-compas" module (https://github.com/rynocouse/laravel-elixir-compass). The Compass extension to elixir allows you to use susy and breakpoint.

You just need to define the import in config.rb require 'breakpoint' require 'susy'

And then you should be good to go.. I had "Compass Compilation Failed!" error which I was able to fixed by simply specifying the options for compass.mix() (refer to https://github.com/rynocouse/laravel-elixir-compass for options)

Hope that helps anyone with a similar issue

Rhyan Foo Kune
  • 21
  • 1