Setup Laravel Mix with SASS and PostCSS critical CSS splitting

Question

I want to setup Laravel Mix with mix.sass AND PostCss Critical CSS splitting. In the end I want two files: app.css and app-critical.css.

Unfortunately I can get this to work. One of the setups (webpack.mix.js) I did try:

    mix
        .js('templates/src/js/app.js', 'web/assets/dist/')
        .js('templates/src/js/home.js', 'web/assets/dist/')
        .extract(['vue','axios','lazysizes','svgxuse', 'fontfaceobserver'], 'web/assets/dist/vendor.js')
        .sass('templates/src/scss/app.scss', 'web/assets/dist/')
        .sourceMaps()
        .options({
            postCss: [
                require('postcss-critical-css')({
                    preserve: false,
                    minify: false
                })
            ]
        })
        .browserSync({
            proxy: '127.0.0.1:8080',
            files: [
            'templates/**/*.twig',
            'templates/src/js/**/*',
            'templates/src/scss/**/*'
        ]
    });

    if (mix.inProduction()) {
        console.log("In production");
        mix.version();
    }

When I run the script via 'npm run watch' I get an error:

10% building modules 0/1 modules 1 active ...ign-tools/templates/src/scss/app.scssWithout `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.

Also, my file is just copying over all the critical styling. The file grows bigger and bigger, expanding the duplicate code everytime the input SCSS/CSS-file changes.

I did try to set up Laravel Mix + mix.sass + one of the following plugins:

Without success :( Anybody with a working setup or link to an example repository?

Thanks, Teun

Setup Laravel Mix with SASS and PostCSS critical CSS splitting

0 Answers0