How can I combine css and less using Elixir?

Question

Here is my working code:

mix.less([
    'app.less'
])
.styles([
    'bootstrap.css',
    '../../../public/css/app.css'
])
.version(['public/css/all.css', 'public/js/all.js']);

This is the only way I could get it to work, but it seems a little janky. I would have assumed that gulp would combine my less file and styles into one, but it doensn't. It creates app.css and all.css and doesn't combine them. I have to add the app.css file to my styles list in order for them to be combined. Is there a cleaner way to do this or is this the only way?

Answer 1

For posterity, the solution above appears to be the only way to do it. Basically, gulp compiles your less into a css file first, and then you tell gulp to combine that compiled css file with your other css files. Then, you versionize that last css file for elixir.