Elixir not creating multiple css files

Question

Tried to find an awnser to this question but could not find it here?

I'm using Laravel Elixir and got the following in my gulpfile:

mix.sass(['app.scss', 'admin.scss'], 'public/css');

Can someone tell me why it is not creating two css files but compiles it into one? How can I achieve it creating multiple files?

Thanks in Advance!

Answer 1

The method to mix sass files is (https://github.com/laravel/elixir/blob/master/ingredients/sass.js):

/**
 * Prepare the Sass task.
 *
 * @param {string|array}  src
 * @param {string}        output
 * @param {object|null}   options
 * @param {bool}          useRuby
 */
var addSassTask = function(src, output, options, useRuby) {
    return compile({
        compiler: 'Sass',
        plugin: useRuby ? 'gulp-ruby-sass' : 'sass',
        pluginOptions: buildOptions(options, useRuby),
        src: src,
        output: output || elixir.config.cssOutput,
        search: '**/*.+(sass|scss)'
    });
};

You have,

mix.sass(['app.scss', 'admin.scss'], 'public/css'); 

Here, src = ['app.scss', 'admin.scss']

and output = 'public/css'

So you should combine a single file to the same file as output as :

mix.sass('app.scss', 'app.scss');
mix.sass('admin.scss', 'admin.scss');

Answer 2

yes the provided code almost did the trick, i wrote it a bit different though...

elixir(function(mix) {
  mix
    .sass('app.scss', './public/css/app.css')
    .sass('admin.scss', './public/css/admin.css');
});

but this atleast for me, didnt work till i started the normal gulp task, gulp watch wont create the new files :S

so stop watch and start the default gulp task with "gulp", after the files are created gulp watch will work again