laravel-mix: sass no longer outputting (v2.1.4 -> v4)

Upon further investigation it actually will not work if I do not have the following block:

mix.webpackConfig({
optimization: {
        splitChunks: {
            cacheGroups: {
                default: false,
                vendors: {
                    chunks: 'initial',
                    name: 'vendor',
                    filename: 'js/[name].js'
                }
            }
        },
    }
});

It seems to be something related to files with chunk names

Same issue here. Using the following webpack.mix.js:

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

mix.js( 'resources/js/app.js', 'js' )
    .sass( 'resources/sass/app.scss', 'css' )
    .extract();

… results in an empty CSS file.

 css/app.css   0 bytes  /js/app, /js/manifest  [emitted]  /js/app, /js/manifest

If I disable the extract line, it produces a valid CSS file. Both devand prod builds produce the same 0 result.

I have tried:

• Changing order of lines
• Disabling the extract line results in normal CSS output
• Adding @Ewan-Walker code does not work for me

While testing, I noticed the issue with @babel/plugin-syntax-dynamic-import (v7.2.0). Using extract and the following results in 0 CSS. Disabling extract`` or the contactForm``` line results in normal CSS output.

window.App = new Vue( {
    el: '#app',
...
    contactForm:     () => import( /* webpackChunkName: "contact-form" */ '../components/contact-form.vue' ),
...
});

I know there are currently issues with the syntax-dynamic-import plugin, so I am not expecting a solution until webpack v5 / laravel-mix v5. But stranger things have happened before at this time of year, so who knows. 😉

Laravel-mix: 4.0.8 OS: Win10

Because there are CSS extraction issues with that plugin, too. This will all be fixed when webpack offers CSS entry points in v5.

Update: After seeing the recently-published article below I was happy to see I could finally add dynamic imports to my Laravel + Vue SPA project. Spent a few hours getting everything working only to realize there is still the “empty CSS” problem. (And in fact I ran into this problem a few months ago as well but forgot about it!)

The article claims that v4.0.16 supports dynamic imports, but unfortunately use of dynamic imports while using extract() still results in empty CSS.

Using Dynamic Imports with Laravel Mix https://laravel-news.com/using-dynamic-imports-with-laravel-mix

@tyler36 I was experiencing the same issue. As soon as I removed the Babel plugin and the dynamic lazy-loading of my components within the VueRouter, the CSS output returned to normal.

I wonder if there is an alternative to this as the lazy loading is quite an important thing for my project.

Unfortunately so far the only thing I am able to pin-point is that it has something to do with extracting specific libraries via.

mix.js('resources/assets/js/main.js', 'public/js')
    .extract([
        'jquery',
        'bootstrap',
        'moment',
    ]);

I can’t seem to replicate the problem outside of this project which is likely to indicate something else going on but at this point I have no idea what as i’ve purged all modules and updated everything that could be updated.

Using the old version also works.