Laravel elixir compile multiple less files

Question

I have this two files in resources/assets/less folder style.less and admin/style.less. I want to compile this files to diffrent paths as the following:

style.less compiled to public/css/

and the other one compiled to public/admin/styles/

this is What i did in the gulpfile.js

elixir(function(mix) {
    mix.less('style.less', 'public/css/');
    mix.less('admin/style.less', 'public/admin/styles/');
});

but this compile only one file. What is the problem and how can i fix this issue?

Torero

Answer 1

I have a project that compiles two different less files to two different css files. The only difference that I see is that I specify the full destination path including the file name.

So, for your case, it will be:

elixir(function(mix) {
    mix.less('style.less', 'public/css/style.css')
       .less('admin/style.less', 'public/admin/styles/style.css');
});

Genevagenevan

Answer 2

I have not got the answer for this yet. But have tried some alternatives, thought will share.

I was thinking we can do like below

elixir(function(mix) {
    mix.less('style.less', 'public/css/')
       .less('admin/style.less', 'public/admin/styles/');
});

But according to the documentation we can't make multiple call to sass or less method. So it is only compiling the latest less file (which in this case admin/style.css).

We can do like this

elixir(function(mix) {
    mix.less(['style.less', 'admin/style2.less'], 'public/css/');
});

but this will compile both into the same folder.

Hoping to know, how can we do it to different folders.

I tried copying the second file into a separate folder, but that also doesn't work

elixir(function(mix) {
    mix.less(['style.less', 'admin/style2.less'], 'public/css/')
       .copy('public/css/style2.css', 'public/admin/style.css');
});

Probably this is because each requests are async and when the copy is getting called, that time the style2.css is not ready yet.

Gallup

Are you sure it will work? As far as I know for sass it doesn't – Raseda

Sorry Marcin, It doesn't. Looks like we can only use one instance of less or sass function according to the documentation. I take back my answer. I assumed it will. Sorry! – Gallup

for less/sass you can import one less/sass in to another. but it works for a single file format obviously. – Echt

Answer 3

mix.less('resources/assets/less/app.scss', 'public/css').
    less('resources/assets/less/admin/style.less', 'public/admin/styles');

Numismatology