Laravel-mix: Compiling and combining multiple less/css files

Created on 18 Feb 2017 · 5Comments · Source: JeffreyWay/laravel-mix

In Laravel Exlixir I used to use the following to compile and combine multiple LESS & CSS files together into one file.

var styles = [
    './resources/assets/vendor/bootstrap/less/bootstrap.less',
    './resources/assets/vendor/datatables/css/dataTables.bootstrap.css',
    './resources/assets/vendor/material-icons/css/material-design-iconic-font.min.css',
    './resources/assets/vendor/custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css',
    './resources/assets/vendor/bootstrap-select/css/bootstrap-select.css',
    './resources/assets/vendor/datepicker/build/css/bootstrap-datetimepicker.min.css',
    './resources/assets/vendor/chosen/chosen.css',
    './resources/assets/app/less/app.less'
];

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

But this is not possible in Laravel Mix

var styles = [
    './resources/assets/vendor/bootstrap/less/bootstrap.less',
    './resources/assets/vendor/datatables/css/dataTables.bootstrap.css',
    './resources/assets/vendor/material-icons/css/material-design-iconic-font.min.css',
    './resources/assets/vendor/custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css',
    './resources/assets/vendor/bootstrap-select/css/bootstrap-select.css',
    './resources/assets/vendor/datepicker/build/css/bootstrap-datetimepicker.min.css',
    './resources/assets/vendor/chosen/chosen.css',
    './
];

mix.less(styles, 'public/css/app.css');

Source

iamohd

👍1

Most helpful comment

With Mix, you should either import all of those files from your main .less entry-point, or instead use mix.combine() after.

mix.less('resources/assets/less/app.less', 'public/css/app.css')
    .combine([
        'other/files.css',
        'public/css/app.less'
    ], 'public/css/everything.css');

JeffreyWay on 19 Feb 2017

👍5

All 5 comments

With Mix, you should either import all of those files from your main .less entry-point, or instead use mix.combine() after.

mix.less('resources/assets/less/app.less', 'public/css/app.css')
    .combine([
        'other/files.css',
        'public/css/app.less'
    ], 'public/css/everything.css');

JeffreyWay on 19 Feb 2017

👍5

@JeffreyWay In your example I guess you meant public/css/app.css in .combine()

MladenJanjetovic on 22 Apr 2017

👍2

One issue occurred when I was importing all of those files in main .less file. The npm watch is not watching for those files I have imported in main.less. Is there a way to explicitly add files to watch list?

MladenJanjetovic on 11 Oct 2017

I noticed this issues. It occurs occasionally. Try to re-watch again.

iamohd on 12 Oct 2017

It stopped when I upgraded Node. It is frustrating how dependencies are failing to warn in these situations.

MladenJanjetovic on 12 Oct 2017

Was this page helpful?

0 / 5 - 0 ratings