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!

try mix.sass('app.scss').sass('admin.scss') This should compile into two files. — chanafdo
– chanafdo, Commented Jun 10, 2015 at 8:55
That didn't work for me. The documentation also states that the sass method can be only called once. — Gijs Beijer
– Gijs Beijer, Commented Jun 10, 2015 at 9:41

Berci · Accepted Answer · 2015-10-06 09:11:17Z

3

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

answered Oct 6, 2015 at 9:11

Berci

413 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gijs Beijer Over a year ago

Just restarting gulp watch did not work? I know you should always restart the 'gulp watch' command after you've made changes to your gulpfile, but i don't see what running just 'gulp' does differently.

Berci Over a year ago

nope only restarting the watch task not created the files, i don't know why. I'm using gulp mainly from a yeoman generator, or by installing it with bower or something, first time using it elixir.

Bishal Paudel · Accepted Answer · 2015-06-10 11:30:12Z

0

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

edited Jun 10, 2015 at 11:30

answered Jun 10, 2015 at 9:49

Bishal Paudel

1,9662 gold badges21 silver badges30 bronze badges

1 Comment

Gijs Beijer Over a year ago

That didn't work but got me on the right track. I got it to work eventualy, specifing the output file completely: mix.sass('app.scss', 'public/css/app.css').sass('admin.scss', 'public/css/admin.css'); Maybe you can add this in your awnser? or should i create an awnser myself for this?

Collectives™ on Stack Overflow

Elixir not creating multiple css files

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related