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

[ewanwalk]

• Laravel Mix Version: 4.0.6no
• Node Version (node -v): 9.9.0
• NPM Version (npm -v): 6.50
• OS: Windows 10

Description:

In version 2 there were no problems with extracting specific libraries as well as building sass - after getting everything "working" with the update to v4 I am no longer able to get any output from scss files.

Steps To Reproduce:

mix.js('resources/assets/js/main.js', 'public/gen/js')
   .sass('resources/assets/scss/main.scss', 'public/gen/css')
   .version();

mix.js('resources/assets/js/spa.js', 'public/js/spa.js');
mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/scss/theme.scss', 'public/css')
    .version();

mix.js('resources/assets/js/z.js', 'public/js')
    .extract([
        'jquery',
        'bootstrap',
        'moment',
    ])
    .sass('resources/assets/scss/style.scss', 'public/css/z.css');

The above outputs css files which are all empty whereas before they worked just fine. In addition to that issue - the extract function no longer works as it used to and you cannot specify specific libraries.

I do not have any webpack config overrides either.

[silvioiannone]

The same happens for stylus files.

If building JS files the style files are just empty. If I skip building JS files the style files are compiled correctly.

[JeffreyWay]

I can't reproduce this. Can someone send me the minimal number of steps to recreate this issue?

[ewanwalk]

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.

[JeffreyWay]

Can you do 'npm update laravel-mix' to ensure you're running the latest version? Still issues?

[ewanwalk]

Yeah, fully updated tried again afterwards and still the same issue - commenting out the extraction portion allows everything to build as intended

[ewanwalk]

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

[tyler36]

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 thecontactForm``` 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

[ewanwalk]

@tyler36 do you happen to have a workaround where you can still extract the files as one would intend to? while its probably not the end of the world it is a very nice optimization to have to be able to extract libraries that are rarely updated and keep them cached.

[tyler36]

@Ewan-Walker sorry, I don't have a work around

Looks like laravel mixing is using extract-text-plugin which might be causing our issues. Their website suggests moving to mini-css-extract-plugin when using a webpack 4 build. I had a look at it this morning but couldn't really get my head around it.

@JeffreyWay is there a reason you are sticking with extract-text-plugin?

[JeffreyWay]

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

[tyler36]

Thanks for the update. Looking forward to some "whatcha working on" lessons for laravel-mix. For some reason, my brain just doesn't want to retain the info.

Can't wait to see v5. Thanks again for update and package!!!!

[dniccum]

@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.

[ewanwalk]

@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.

[noogen]

@Ewan-Walker This was an issue caught during testing. Unfortunately, due to upstream plugin + WebPack4 issue, dynamic import (lazy loading) will probably not going to be support until WebPack5. ref: https://github.com/JeffreyWay/laravel-mix/issues/1833#issuecomment-445482313

[derekphilipau]

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

[connecteev]

Confirming the same with [email protected] and [email protected]

Any chance we can reopen and find a fix for this? It's causing this issue here:
https://github.com/inertiajs/inertia-vue#setup-dynamic-imports
(downgrading either mix or webpack feels like we're moving backwards)

[m1guelpf]

@JeffreyWay v5 was tagged 10 days ago, is this fixed?

[panda-madness]

@m1guelpf Webpack 5 is still in alpha stage.

I don't think spamming this issue is productive. Jeffrey has already voiced his plan for this issue. If you are unhappy with the situation you can figure out a fix and PR it.

[gtempesta]

I think I am stuck to v2 because of this. The issue is still present in v3 and v4

[ghost]

@gtempesta working in v3 for me, upgrading to >v4 breaks it...

[sagitarius29]

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

Thanks its works for me :D