Search code examples
csslaravelsasslaravel-elixir

Elixir not creating multiple css files


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!


Solution

  • 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');