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

.extract() leads to empty .css files #1914

Closed
rderimay opened this issue Jan 4, 2019 · 13 comments

Comments

@rderimay
Copy link

commented Jan 4, 2019

  • Laravel Mix Version: laravel-mix@4.0.13 (npm list --depth=0)
  • Node Version (node -v): v10.10.0
  • NPM Version (npm -v): 6.5.0
  • OS:

Description:

css files are empty (0 bytes), with no error, whenever a js file has been processed before.

mix
  .js('resources/front/visitors/visitors.js', 'public/js')
  .sass('resources/front/visitors/sass/visitors.scss', 'public/css')
  .extract([....])

leads to a 0 bytes css file whenever

mix
  .js('resources/front/visitors/visitors.js', 'public/js')
  .sass('resources/front/visitors/sass/visitors.scss', 'public/css')

creates the wanted css.

Steps To Reproduce:

Running npm run dev or npm run prod. Specifying the array of libs you want to extract (.extract([...])) or letting Mix do the guessing job (.extract()) does not change the problem.

Output in the first case:

 DONE  Compiled successfully in 11268ms
                     Asset      Size                                         Chunks             Chunk Names
/css/semantic-visitors.css   0 bytes                     /js/manifest, /js/visitors  [emitted]  /js/manifest, /js/visitors
         /css/visitors.css   0 bytes                     /js/manifest, /js/visitors  [emitted]  /js/manifest, /js/visitors
           /js/manifest.js  9.08 KiB                                   /js/manifest  [emitted]  /js/manifest
             /js/vendor.js  2.14 MiB                                     /js/vendor  [emitted]  /js/vendor
           /js/visitors.js  1.28 MiB                                   /js/visitors  [emitted]  /js/visitors

and in the second case:

 DONE  Compiled successfully in 11111ms
                     Asset        Size                                         Chunks             Chunk Names
/css/semantic-visitors.css     653 KiB                                   /js/visitors  [emitted]  /js/visitors
         /css/visitors.css    14.5 KiB                                   /js/visitors  [emitted]  /js/visitors
           /js/visitors.js    2.93 MiB                                   /js/visitors  [emitted]  /js/visitors
@rderimay

This comment has been minimized.

Copy link
Author

commented Jan 4, 2019

Not sure if the roots of the problem could be the same as in this bug : #1889

@dolbex

This comment has been minimized.

Copy link

commented Jan 6, 2019

Same issue on 4.0.13

@randompixel

This comment has been minimized.

Copy link

commented Jan 7, 2019

Related to #1887 . Answer seems to be don't upgrade yet if using SCSS

@JeffreyWay JeffreyWay closed this Jan 8, 2019

@JeffreyWay

This comment has been minimized.

Copy link
Owner

commented Jan 8, 2019

No, answer is don't upgrade if you're using dynamic imports. See the Mix 4 release notes.

@dolbex

This comment has been minimized.

Copy link

commented Jan 8, 2019

Yeah, saw those - just missed them when trying to upgrade. I took a look at webpack 5 and it appears they are only at 20% :/

Biggest thing my team is missing from 2.x is the new multi-config that you dropped last month so we can do multiple tailwind configurations. Think it's even possible to get it in 2.x?

@nelson6e65

This comment has been minimized.

Copy link

commented Feb 6, 2019

Well... we have to do not use extract() then. 😢

There is a note in extract-text-webpack-plugin that is maybe related with this:

⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

I'm having #1889 problem too. 😢

But without extract(), all is working fine.

@njoguamos

This comment has been minimized.

Copy link

commented Feb 16, 2019

Same problem here. However, css compiles successfully when I remove extract()

@stephan-v

This comment has been minimized.

Copy link
Contributor

commented Feb 26, 2019

You are telling me there is no way this can be fixed in the current setup?

@elramus

This comment has been minimized.

Copy link

commented Mar 6, 2019

Running into this as well. In my case, we've been using extract() just fine on v4 of Mix for a while, but I'm now implementing code splitting with dynamic imports using React lazy, and now SASS is compiling down to an empty CSS file. Removing extract() does not solve the issue though!

FWIW, I created a new, clean Laravel / React project and implemented both SASS compiling and code splitting, and things worked just fine. Added in extract() and we're back to empty CSS. Trying to nail down what the difference is, maybe that'll provide some clues.

Update: Looks like js() can cause this too. I had react() going, and then also js() for some separate, non-React stuff. So I had to disable js() and extract() before the CSS would compile properly while using dynamic imports. scripts() seems to play nice though.

@FireworksX

This comment has been minimized.

Copy link

commented Apr 12, 2019

This problem is not resolved? I also use extract and have problem with empty styles. "laravel-mix": "^4.0.7"

@viral-vector

This comment has been minimized.

Copy link

commented May 11, 2019

same issue as well on mix ^4.0.7

@vesaka

This comment has been minimized.

Copy link

commented Jun 19, 2019

Today I faced the same issue.
Without mix.extract() it works but I wanted it there.

So here's a workaround I found.
Separate the webpack.mix.js file into two files.

  1. webpack.mix.js - it will serve the javascript compiling only. Remove any sass, less, or css file paths. Leave javascript filenames only.
    2 webpack.css.js (or name it whatever you want) - this one will serve the styles only. No javascript (unless it has no dynamic import syntax in it)

Next step is to add new scripts into your package.json file

"scripts": [
...
"css-watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --env.mixfile=webpack.css.mix --config=node_modules/laravel-mix/setup/webpack.config.js",
"css-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack.css.mix --config=node_modules/laravel-mix/setup/webpack.config.js"
]

NOTE: On this step, make sure to match that --env.mixfile option with the second webpack file.

Final step: npm run dev and npm run css-dev
If you want to watch the files at the same time you'll need a second terminal window.
One should run and watch npm run watch and the second one - npm run css-watch

I hope it helps.

@plumpboy

This comment has been minimized.

Copy link

commented Jul 21, 2019

@vesaka you won't need 2 terminal windows, just npm run watch & npm run css-watch, or add a script "npm run watch-all" to run above scripts.
one more thing you will need merge the old manigest file with the new one as it will be replaced every time you build.
https://github.com/KABBOUCHI/laravel-mix-merge-manifest

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.