Laravel 5 Elixir + gulp mix and version multiple css or less files

Question

I have a separate css/less file for my landing / login page. How do I tell gulp, that it should compile two files for me? Here is my approach which generates unfortunately only one file for me.

elixir(function (mix) {
    // only for the landing-page
    mix.less('landing.less')
        .version('css/landing.css');

    // for the application, after login
    mix.less('app.less')
        .version('css/app.css');
});

On my landing page, I've assumed something like this:

<link rel="stylesheet" href="{{ elixir("css/landing.css") }}">

but the build/css folder only shows my css/app.css file. :(

Emeka Mbah · Accepted Answer · 2015-02-13 12:54:31Z

11

You can not call mix.version() twice:

simply do:

elixir(function (mix) {

    mix.less('landing.less');

    // for the application, after login
    mix.less('app.less');

    mix.version([
       'css/app.css', 
       'css/landing.css'
    ]);

});

This will generate two files app.css and landing.css for you in /public/build/css

edited Feb 13, 2015 at 12:54

answered Feb 13, 2015 at 12:20

Emeka Mbah

17.7k11 gold badges84 silver badges104 bronze badges

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

4 Comments

wiesson Over a year ago

Hmm, your example did not work for me, but you gave me the right idea!

Emeka Mbah Over a year ago

sorry i forgot to include them in square braces mix.version(['css/app.css', 'css/landing.css']);

tholu Over a year ago

One problem left is that .map-files are not copied to the /public/build/ folder after using mix.version().

IIllIIll Over a year ago

Thanks for this! I sort of wish the Laravel docs would have highlighted this.

wiesson · Accepted Answer · 2015-02-13 12:50:32Z

2

Thanks to Digitlimit answer, I was able to solve my problem. I've inserted the files as an array and it just works :)

elixir(function (mix) {
    mix.less(['landing.less', 'app.less']);
    mix.version(['css/app.css', 'css/landing.css']);
});

answered Feb 13, 2015 at 12:50

wiesson

6,8436 gold badges43 silver badges71 bronze badges

1 Comment

Emeka Mbah Over a year ago

sorry i forgot to include them in square braces mix.version(['css/app.css', 'css/landing.css']); :(

Somwang Souksavatd · Accepted Answer · 2017-01-23 15:55:11Z

0

try this

elixir(function(mix) {
mix.styles([
    'normalize.css',
    'main.css'
], 'public/assets/css/site.css');
});

answered Jan 23, 2017 at 15:55

Somwang Souksavatd

5,09734 silver badges30 bronze badges

Collectives™ on Stack Overflow

Laravel 5 Elixir + gulp mix and version multiple css or less files

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related