stephanedemotte's avatar

[L5] Elixir Sass only compile the last one

Hi ! When i try to compile 2 set of sass, only the last one appear in the public directory

elixir(function(mix) {
// this one will be ignored
mix.sass('../backend/sass/app.scss', 'public/backend/css/', {includePaths: [elixir.config.bowerDir]}) 
mix.sass('../frontend/sass/app.scss', 'public/frontend/css/', {includePaths: [elixir.config.bowerDir]})

Same thing with chaining

mix.sass(...).sass(...)

Same when i make 2 elixir

elixir(function(mix) {
    mix.sass('../frontend/sass/app.scss', 'public/frontend/css/', {includePaths: [elixir.config.bowerDir]})
});   
elixir(function(mix) {
    mix.sass('../backend/sass/app.scss', 'public/backend/css/', {includePaths: [elixir.config.bowerDir]}) 
});

What is wrong in my code ? Thanks for your help :)

0 likes
2 replies
pstephan1187's avatar

I had similar problems in the past. To process two sass files separately, you need to use an array:

mix.sass(['../frontend/sass/app.scss','../backend/sass/app.scss']);

Now, I have not tried to export to different folders, so I'm not 100% sure how to do that, but you may want to try using an array on that as well:

mix.sass(
    ['../frontend/sass/app.scss','../backend/sass/app.scss'],
    ['public/frontend/css/','public/backend/css/'],
    {includePaths: [elixir.config.bowerDir]}
);

If that doesn't work, you can always move the processed CSS file with the copy() command:

mix.sass(['../frontend/sass/frontend.scss','../backend/sass/backend.scss']);
mix.copy('public/css/fronted.css', 'public/frontend/css/app.css');
mix.copy('public/css/backend.css', 'public/backend/css/app.css');
stephanedemotte's avatar

The second param doesn't accept an array

mix.sass([
    '../frontend/sass/frontend.scss',
    '../backend/sass/backend.scss'
  ], null, {includePaths: [elixir.config.bowerDir]})

We can't have a separate folder, but if we name it differently, it's good :)

Please or to participate in this conversation.