Semantic UI & Laravel Mix using less files

app.less

// resources/assets/less/app.less

@semantic: '../semantic/src/';
@definitions: '@{semantic}definitions/';

& {
    @import '@{definitions}globals/reset.less';
}

& {
    @import '@{definitions}globals/site.less';
}

/*
 * Optional imports
 */

& {
    @import '@{definitions}elements/icon.less';
}

& {
    @import '@{definitions}modules/dimmer.less';
}

& {
    @import '@{definitions}elements/loader.less';
}

& {
    @import '@{definitions}collections/grid.less';
}

& {
    @import '@{definitions}elements/segment.less';
}

& {
    @import '@{definitions}elements/image.less';
}

& {
    @import '@{definitions}elements/header.less';
}

& {
    @import '@{definitions}collections/form.less';
}

& {
    @import '@{definitions}modules/checkbox.less';
}

& {
    @import '@{definitions}elements/button.less';
}

& {
    @import '@{definitions}collections/message.less';
}

site.variables

// resources/assets/semantic/src/site/globals/site.variables

/*******************************
     User Global Variables
*******************************/


/*******************************
        Webpack can't
       find font files
*******************************/
// https://github.com/Semantic-Org/Semantic-UI/issues/3533#issuecomment-188253175
@fontPath : '../assets/fonts';

webpack.mix.js

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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