Laravel-mix: Cannot emit CSS files from sass and less in same build

[mstralka]

I'm probably doing something wrong, but it seems like mix cannot run LESS and SASS in the same build. It can do multiple SASS or multiple LESS, but it cannot do both.

My frontend is built with LESS (site.less, which should build to public/css/site.css) and the backend is built with SASS (app.scss, which should build to public/css/app.css).

When I try to do this with laravel-mix 0.5 by running npm run dev:

mix
  .js('resources/assets/js/site.js', 'public/js')
  .less('resources/assets/less/site.less', 'public/css')
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')

It outputs this:

 DONE  Compiled successfully in 16519ms

            Asset      Size  Chunks           Chunk Names
       /js/app.js   4.92 MB  0[emitted]  [big]app
      /js/site.js   2.14 MB  1[emitted]  [big]site
     /css/app.css   1.93 MB  1[emitted]  [big]site
mix-manifest.json  98 bytes  [emitted]

Note that /css/site.css is missing?

If I replace the LESS call with a dummy SASS call, it emits both CSS files correctly:

mix
  .js('resources/assets/js/site.js', 'public/js')
  .sass('resources/assets/sass/site.scss', 'public/css') // replaced LESS with an empty SCSS file
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')

It outputs this:

 DONE  Compiled successfully in 16282ms

            Asset       Size  Chunks           Chunk Names
       /js/app.js    4.92 MB  0[emitted]  [big]app
      /js/site.js    2.14 MB  1[emitted]  [big]site
    /css/site.css  369 bytes  1[emitted]  site
     /css/app.css    1.93 MB  1[emitted]  [big]site
mix-manifest.json  134 bytes  [emitted]

I also tried appending the filename to the output but that didn't help either:

mix
  .js('resources/assets/js/site.js', 'public/js/')
  .less('resources/assets/less/site.less', 'public/css/site.css')
  .js('resources/assets/js/app.js', 'public/js/')
  .sass('resources/assets/sass/app.scss', 'public/css/app.css')

Same output:

 DONE  Compiled successfully in 15673ms

            Asset      Size  Chunks           Chunk Names
       /js/app.js   4.92 MB  0[emitted]  [big]app
      /js/site.js   2.14 MB  1[emitted]  [big]site
     /css/app.css   1.93 MB  1[emitted]  [big]site
mix-manifest.json  98 bytes  [emitted]

So mix appears to be able to run two sass() builds, or two less() builds, but it's not able to do both. Or am I doing something wrong?
Thanks in advance
Mark

[JeffreyWay]

Yeah you can only use one or the other right now.

[mstralka]

Ok I thought as much after I started going through the source code for the module. I'll convert the LESS code to SASS.

Thanks Jeffrey

[hassoon3]

Totally works for me:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css/app-scss.css')
   .less('resources/assets/less/site.less', 'public/css/site-less.css')
   .styles([
       'public/css/app-scss.css',
       'public/css/site-less.css'
   ], 'public/css/app.css');

Laravel Framework 5.4.25