Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sass no longer outputting (v2.1.4 -> v4) #1856

Closed
ewanwalk opened this issue Dec 13, 2018 · 20 comments

Comments

@ewanwalk
Copy link

@ewanwalk ewanwalk commented Dec 13, 2018

  • 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

This comment has been minimized.

Copy link

@silvioiannone silvioiannone commented Dec 13, 2018

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

This comment has been minimized.

Copy link
Owner

@JeffreyWay JeffreyWay commented Dec 13, 2018

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

@JeffreyWay JeffreyWay closed this Dec 14, 2018
@ewanwalk

This comment has been minimized.

Copy link
Author

@ewanwalk ewanwalk commented Dec 15, 2018

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

This comment has been minimized.

Copy link
Owner

@JeffreyWay JeffreyWay commented Dec 15, 2018

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

@ewanwalk

This comment has been minimized.

Copy link
Author

@ewanwalk ewanwalk commented Dec 15, 2018

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

@ewanwalk

This comment has been minimized.

Copy link
Author

@ewanwalk ewanwalk commented Dec 16, 2018

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

This comment has been minimized.

Copy link

@tyler36 tyler36 commented Dec 17, 2018

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

@ewanwalk

This comment has been minimized.

Copy link
Author

@ewanwalk ewanwalk commented Dec 17, 2018

@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

This comment has been minimized.

Copy link

@tyler36 tyler36 commented Dec 18, 2018

@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

This comment has been minimized.

Copy link
Owner

@JeffreyWay JeffreyWay commented Dec 18, 2018

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

@tyler36

This comment has been minimized.

Copy link

@tyler36 tyler36 commented Dec 18, 2018

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

This comment has been minimized.

Copy link

@dniccum dniccum commented Dec 19, 2018

@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

This comment has been minimized.

Copy link
Author

@ewanwalk ewanwalk commented Dec 20, 2018

@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

This comment has been minimized.

Copy link

@noogen noogen commented Apr 1, 2019

@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: #1833 (comment)

@derekphilipau

This comment has been minimized.

Copy link

@derekphilipau derekphilipau commented Jul 1, 2019

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

This comment has been minimized.

Copy link
Contributor

@connecteev connecteev commented Jul 25, 2019

Confirming the same with laravel-mix@4.1.2 and webpack@4.37.0

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

This comment has been minimized.

Copy link
Contributor

@m1guelpf m1guelpf commented Sep 29, 2019

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

@panda-madness

This comment has been minimized.

Copy link
Contributor

@panda-madness panda-madness commented Oct 2, 2019

@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

This comment has been minimized.

Copy link

@gtempesta gtempesta commented Oct 17, 2019

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

@naillizard

This comment has been minimized.

Copy link

@naillizard naillizard commented Nov 7, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.