.extract() leads to empty .css files

[rderimay]

• 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]

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

[dolbex]

Same issue on 4.0.13

[randompixel]

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

[JeffreyWay]

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

[dolbex]

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]

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]

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

[stephan-v]

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

[elramus]

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 problem is not resolved? I also use extract and have problem with empty styles. "laravel-mix": "^4.0.7"

[viral-vector]

same issue as well on mix ^4.0.7

[vesaka]

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.