Perform tasks sequentially LESS and SASS before STYLES

• Laravel Mix Version: 6.0.18
• Node Version (node -v): 14.16.1
• NPM Version (npm -v): 6.14.12
• OS: Windows 10

Description:

I have a webpack file where I am compiling less, sass and grouping with styles. However, whenever I perform these tasks the webpack is not respecting the order, in this case my final .css file is not correct. Only after the 2 execution that ends up working out.

Steps To Reproduce:

const mix = require('laravel-mix');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
require('laravel-mix-merge-manifest');

mix.disableNotifications();

mix.options({
    processCssUrls: false,
    cleanCss: {
        level: {
            1: {specialComments: 'none'}
        }
    },
    postCss: [
        require('postcss-discard-comments')({removeAll: true})
    ],
    purifyCss: false,
    clearConsole: false
});

// webpack configuration
mix.webpackConfig({
    plugins: [
        new CleanWebpackPlugin({
            dry: false,
            cleanOnceBeforeBuildPatterns: [
                // not exclude files
                '!.htaccess',
                '!index.php',
                '!robots.txt',
                '!vendor',
                // exclude folder/files
                'static/css/site'
            ]
        })
    ]
});

// LESS
mix.less('resources/assets/less/skin-site.less', 'public/static/css/site');

// SASS
mix.sass('resources/assets/sass/site.scss', 'public/static/css/site');

// COMBINE CSS
mix.styles([
    'public/static/css/site/site.css',
    'public/static/css/site/skin-site.css',
    // Vendors
    'resources/assets/vendor/layerslider/6.9.2/css/layerslider.css',
], 'public/static/css/site/app-site.css');

if(mix.inProduction()){
    mix.version();
}

// merge mix-manifest.json
mix.mergeManifest();

[garbinmarcelo]

A while ago I used gulp, I still have it in a legacy project, really it works. But I decided to set Laravel Mix as the default tool for assets, otherwise everything works fine.

Maybe this issue is a possible new feature 😄

I think it’s not just me who has this problem or is it? 😳

[mikesaintsg]

Thanks! Yeah, that seems like a good work around. I took a deeper look at mix and it only provides a single instance for a build, so a separate file is the only way to separate builds. Then there’s also webpack that isn’t built to run sequentially. Those are two big strikes, I don’t see sequential builds coming to either packages any times soon.

In these rare cases, I would say gulp would be a better choice since they provide the ability to run builds sequentially using the series method.

https://gulpjs.com/docs/en/api/series