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

rderimay · 2019-01-04T09:08:49Z

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

The text was updated successfully, but these errors were encountered:

rderimay · 2019-01-04T09:26:46Z

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

dolbex · 2019-01-06T09:15:41Z

Same issue on 4.0.13

randompixel · 2019-01-07T14:51:20Z

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

JeffreyWay · 2019-01-08T16:34:50Z

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

dolbex · 2019-01-08T16:36:38Z

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 · 2019-02-06T23:59:26Z

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 · 2019-02-16T23:19:35Z

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

stephan-v · 2019-02-26T13:31:03Z

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

elramus · 2019-03-06T17:22:33Z

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 · 2019-04-12T05:48:23Z

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

viral-vector · 2019-05-11T03:13:45Z

same issue as well on mix ^4.0.7

vesaka · 2019-06-19T03:35:14Z

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.

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 · 2019-07-21T11:52:43Z

@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

rmondesilva · 2019-08-30T14:35:07Z

@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

Second command npm run css-watch will not work.
You can install something like concurrently to run these both the same time.

and maybe even better, instead of npm run watch for JS, rename it to npm run js-watch (better consistency too),
Then add again the npm run watch and replace its value to "concurrently \"npm run js-watch\" \"npm run css-watch\""

So that way, everything back to what they used to be. Same command. No hassle to inform co-devs.

plumpboy · 2019-11-06T04:12:47Z

@rmondesilva take a look at this repo https://github.com/euclid1990/laravel
i have test and use it, so i commit it work at least in ubuntu

gtempesta · 2019-11-09T22:13:02Z

Followed @vesaka's and @rmondesilva's suggestions and it's working fine on a fresh install of Laravel (using Laravel Mix v4.0.7).

farums · 2020-01-18T13:30:56Z

npm --section=app run watch -- --watch-poll & npm --section=admin run watch -- --watch-poll
и
"dev-all": "concurrently "npm --section=app run dev" "npm --section=admin run dev" --kill-others-on-fail",

windows 10 -- ok

mcanvar · 2020-01-22T11:48:37Z

I come up with this workaround by inspiring @vesaka 's answer. Instead of using different webpack config files I've controlled extracting and scss compiling with environmental variables:

So my compiling commands in package.json become:

"development": "cross-env NODE_ENV=development COMP_TYPE=js node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"development-css": "cross-env NODE_ENV=development COMP_TYPE=css node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-css": "npm run development-css -- --watch",

And my dynamic control area in webpack.mix.js:

if (process.env.COMP_TYPE === 'css')
    mix
        .sass('css/main.scss', 'static/dist')
        .sass('css/vendor.scss', 'static/dist');
else
    mix
        .js('js/app.js', 'static/dist')
        .extract([
            'core-js/stable',
            'regenerator-runtime/runtime',
            'intersection-observer',
            'vue',
            'bootstrap-vue',
            'axios',
            'moment'
        ]);

And lastly if you need manifest files for dealing Browser Caching, either you can use @plumpboy 's solution or set publicPaths at the same way:

if (process.env.COMP_TYPE === 'css')
    mix.setPublicPath('static/dist/css');
else
    mix.setPublicPath('static/dist/js');

chinloyal · 2020-02-11T18:23:37Z

This is still an issue, even now in the 5.0 version. The workarounds are not suitable for me.

irving-caamal · 2020-02-14T19:10:03Z

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.

little archaic solution but very helpful

irving-caamal · 2020-02-14T19:11:18Z

This is still an issue, even now in the 5.0 version. The workarounds are not suitable for me.

Same problem here , thanks to post it.... thank god I dont update my webpack version to check if that work..

ppshobi · 2020-03-29T17:43:25Z

Same here, If I add mix.extract() results in proper js bundling but empties out the css files.

paullaffitte · 2020-04-02T04:01:00Z

Glad to see that I'm not the only one needing this to be fixed. By the way @JeffreyWay, could you reopen the issue please?

jnickzlim · 2020-04-25T02:52:11Z

Same here, getting empty app.css with .extract()

ilamp · 2020-05-07T03:52:47Z

Same thing is happening for one of my projects as well.

ilamp · 2020-05-14T17:50:20Z

@keradan For the time being you can probably use split you mix file into two and work that way. I'll post my setup shortly.

Install laravel-mix-merge-manifest
npm install laravel-mix-merge-manifest --save-dev

//webpack.css.mix.js

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

mix.sass('resources/sass/app.scss', 'public/css')
  .version();

if (!mix.inProduction()) {
  mix.sourceMaps();
}

mix.mergeManifest();

//webpack.js.mix.js

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

mix.react('resources/js/app.js', 'public/js')
  .extract([])
  .setPublicPath('public')
  .version();

if (!mix.inProduction()) {
  mix.sourceMaps();
}

mix.mergeManifest();

Update your package.json's scripts section to:

    "dev": "npm run development-js && npm run development-css",
    "development-js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.js.mix",
    "development-css": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.css.mix",
    "prod": "npm run production-js && npm run production-css",
    "production-js": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.js.mix",
    "production-css": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.css.mix",
    "watch": "npm run development-js -- --watch & npm run development-css -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",

chrisgrim · 2020-05-31T04:53:06Z

@ilamp
I tried using your solution. If I run npm run watch it will only run the development-js. When I do a control-c to stop it, then it runs the development-css. Is this how it behaves for you?

ilamp · 2020-05-31T04:58:28Z

@ilamp
I tried using your solution. If I run npm run watch it will only run the development-js. When I do a control-c to stop it, then it runs the development-css. Is this how it behaves for you?

I've updated the instructions. Please try it now.

HartleySan · 2020-06-09T14:19:29Z

@ilamp
Like chrisgrim said, I'm doing exactly what you wrote, and I'm getting the same problem on the watcher. npm run dev works fine, but when I run npm run watch from a Visual Studio Code terminal window, I can save, for example, app.js and it builds, but if I try to save app.scss, nothing happens. If I reverse npm run development-js -- --watch and npm run development-css -- --watch, then just the CSS builds on save. Any ideas? Thank you.

chrisgrim · 2020-06-09T15:46:26Z

@HartleySan
Ilamps edit did work for me. Did you change the && to &?

old way
"watch": "npm run development-js -- --watch && npm run development-css -- --watch",

new way with only one &
"watch": "npm run development-js -- --watch & npm run development-css -- --watch",

HartleySan · 2020-06-09T15:52:52Z

@HartleySan
Ilamps edit did work for me. Did you change the && to &?

old way
"watch": "npm run development-js -- --watch && npm run development-css -- --watch",

new way with only one &
"watch": "npm run development-js -- --watch & npm run development-css -- --watch",

Yes, I did. I tried both & and &&, and got the same result.
Here's my scripts object in package.json:

"scripts": {
    "dev": "npm run development",
    "development": "npm run development-js && npm run development-css",
    "development-css": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.css.mix",
    "development-js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.js.mix",
    "watch": "npm run development-js -- --watch & npm run development-css -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},

And here're my webpack.js.mix.js and webpack.css.mix.js files:

webpack.js.mix.js:

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

mix
    .js('resources/js/app.js', 'public/js/')
    .extract(['vue'])
    .version();

mix.mergeManifest();

webpack.css.mix.js:

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

mix
    .sass('resources/sass/vendor.scss', 'public/css/')
    .sass('resources/sass/app.scss', 'public/css/')
    .version();

mix.mergeManifest();

Any ideas? Thanks.

chrisgrim · 2020-06-09T15:56:49Z

Hmm I am relatively new to too this too, but let me post my mix

"scripts": {
        "dev": "npm run development-js && npm run development-css",
        "development-js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.js.mix",
        "development-css": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.css.mix",
        "prod": "npm run production-css && npm run production-js",
        "production-js": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.js.mix",
        "production-css": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.css.mix",
        "watch": "npm run development-css -- --watch & npm run development-js -- --watch",
        "watch-poll": "npm run watch -- --watch-poll"
    },

and my js and css mix files

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

mix.sass('resources/sass/app-create.scss', 'public/assets')
    .sass('resources/sass/app-admin.scss', 'public/assets')
    .sass('resources/sass/app-lite.scss', 'public/assets')
    .sass('resources/sass/app.scss', 'public/assets')
    .mergeManifest();

if (mix.inProduction()) {
    mix.version();
}

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

mix.js('resources/js/app.js', 'public/assets')
    .extract(['vue','vuelidate','leaflet','vuelidate-error-extractor','vue-cookies'])
    .mergeManifest()
    .webpackConfig({
    output: {
        chunkFilename: '[name].js?id=[chunkhash]',
    }
});


if (mix.inProduction()) {
    mix.version();
}

Also I am using iTerm for my editor? maybe that affects it.

HartleySan · 2020-06-09T17:16:24Z

@chrisgrim
Thanks for posting all that. I compared your scripts object to mine, character by character, and saw that you added the --watch option to development-js and development-css, which I didn't have.

All the same, after making the changes and trying, still, the same end result. I am using Windows 10, but with the Git Bash terminal integrated into Visual Studio Code, so not sure why that would matter. I will continue to investigate. Thanks.

chrisgrim · 2020-06-09T17:18:25Z

Sorry I couldn't help more. I will play with it a bit on my end and see if I can't find something else.

ilamp · 2020-06-09T18:32:29Z

@HartleySan Try using npm run watch-poll. I will see if I can test this on windows later.

HartleySan · 2020-06-09T18:47:19Z

@HartleySan Try using npm run watch-poll. I will see if I can test this on windows later.

Thanks for the reply, ilamp. I tried npm run watch-poll, but got the same result, which is to say, it still only builds either the CSS or JS, whichever is first in the watch command. I'm using Windows 10, by the way.

gtempesta · 2020-06-10T19:44:30Z

@rmondesilva was suggesting that without concurrently one of the two commands is not working. I installed it without trying other solutions and it has worked.

npm install concurrently --save-dev

I'm using two config files (webpack.mix.js and webpack.mix.css.js), and this is the relevant part of my package.json:

"scripts": {
  "css-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack.mix.css --config=node_modules/laravel-mix/setup/webpack.config.js",
  "js-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "development": "concurrently \"npm run css-dev\" \"npm run js-dev\"",
  "css-watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --env.mixfile=webpack.mix.css --config=node_modules/laravel-mix/setup/webpack.config.js",
  "js-watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "concurrently \"npm run css-watch\" \"npm run js-watch\"",
  "watch-poll": "npm run watch -- --watch-poll",
  "css-production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --env.mixfile=webpack.mix.css --config=node_modules/laravel-mix/setup/webpack.config.js",
  "js-production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "production": "concurrently \"npm run css-production\" \"npm run js-production\"",
  "dev": "npm run development",
  "prod": "npm run production"
}

Last two ones are obviously just aliases, and I don't believe I have ever used watch-poll. I hope this helps.

(I'm also using mergeManifest() in the two webpack.mix configuration files).

HartleySan · 2020-06-10T21:30:55Z

That npm module concurrently did the trick, gtempesta.
Thanks a lot.

Ragash · 2020-06-16T20:44:51Z

it's sad to see this issue still open after one year

HartleySan · 2020-06-16T20:51:55Z

it's sad to see this issue still open after one year

Indeed. So surprised why this hasn't been resolved yet. Really makes the build process, which is already a confusing black box, even more confusing.

danialdezfouli · 2020-07-30T12:21:27Z

It happens when I use React.lazy

dkaufmann96 · 2020-09-03T09:02:02Z

Any news on this?

torian257x · 2020-09-03T17:46:11Z

@dkaufmann96 there is a gist with an example of concurrently and tailwind separately here: https://gist.github.com/Jossnaz/7cf182e794e515d068159ad71fcf7855

look at the yarn hot command
not sure how active @JeffreyWay still is on this project. Maybe he should onboard some people?
doesn't seem to be very active on the project if you look here:
https://github.com/JeffreyWay?tab=overview&from=2020-09-01&to=2020-09-03

seems like he is busy with other interesting ideas

JBtje · 2020-09-04T11:58:12Z

A very simple example that causes this problem:

CSS file is generated w/o problem:

import en from './somefile';

CSS is 0 Bytes:

import('./somefile');

note that somefile is empty in my test.

Not sure if this is in any way helpfull... but who knows!

dkaufmann96 · 2020-09-08T09:40:36Z

@jossnaz thank you, I ended up using the workaround described in #2070 (comment).
Lets hope this will be fixed eventually.

JeffreyWay · 2020-10-10T20:43:22Z

Just to clarify. This was a known issue with Mix and webpack 4. We tried for a long time to resolve it, but every option ended up breaking a different part of the Mix API.

The problem is solved in Mix v6 which now uses webpack 5.

HartleySan · 2020-10-10T21:15:25Z

Just to clarify. This was a known issue with Mix and webpack 4. We tried for a long time to resolve it, but every option ended up breaking a different part of the API.

The problem is solved in Mix v6 which now uses webpack 5.

Great to hear, Jeffrey. Any ETA on a Mix v6 release? Thank you.

JeffreyWay · 2020-10-10T23:18:15Z

This coming week.

kissjacky · 2020-11-18T02:31:36Z

This coming week.

any release of Mix v6 ? thx

Tofandel · 2021-06-17T11:45:55Z

Nvm I was using multiple extracts and forgot to add the <script> of each of them

AleksandrMihasenko · 2021-07-15T08:01:20Z

Hello!
I have a project where a website is built by gulp and admin panel of this site is built by laravel mix. I need to delete gulp and rewrite using webpack too.
Can I use separeted config files for this (one config file for adminpanel, other for website)? There are solutions about separeting css and js files. Does it happen in my case?

saas786 · 2023-01-16T11:20:46Z

@rmondesilva was suggesting that without concurrently one of the two commands is not working. I installed it without trying other solutions and it has worked.

npm install concurrently --save-dev

I'm using two config files (webpack.mix.js and webpack.mix.css.js), and this is the relevant part of my package.json:

"scripts": {
  "css-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack.mix.css --config=node_modules/laravel-mix/setup/webpack.config.js",
  "js-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "development": "concurrently \"npm run css-dev\" \"npm run js-dev\"",
  "css-watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --env.mixfile=webpack.mix.css --config=node_modules/laravel-mix/setup/webpack.config.js",
  "js-watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "concurrently \"npm run css-watch\" \"npm run js-watch\"",
  "watch-poll": "npm run watch -- --watch-poll",
  "css-production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --env.mixfile=webpack.mix.css --config=node_modules/laravel-mix/setup/webpack.config.js",
  "js-production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "production": "concurrently \"npm run css-production\" \"npm run js-production\"",
  "dev": "npm run development",
  "prod": "npm run production"
}

Last two ones are obviously just aliases, and I don't believe I have ever used watch-poll. I hope this helps.

(I'm also using mergeManifest() in the two webpack.mix configuration files).

For my initial testing, this seems to resolve my issue. I was unable to get the multiple watch commands to work, as I was running multiple mix commands with different configs, but using concurrently helped.

I am using laravel-mix: "^6.0.49".

rderimay mentioned this issue Jan 4, 2019

Extracted files path issue when using extract() and chunkFilename.. #1889

Closed

JeffreyWay closed this as completed Jan 8, 2019

oxyc mentioned this issue Jun 18, 2019

[10.0.0-dev] Dynamic imports leads to empty CSS bundles roots/sage#2204

Closed

4 tasks

mhelaiwa mentioned this issue Jul 14, 2019

build empty css when using .js and .react together #2147

Closed

michaeldzjap mentioned this issue Aug 7, 2019

Laravel MixJS and react-pdf prevent sass compiling wojtekmaj/react-pdf#432

Closed

hackerESQ mentioned this issue May 19, 2020

fix: Fixes broken webpack build arkokoley/pdfvuer#56

Closed

gtempesta mentioned this issue Jun 18, 2020

Code splitting prevents CSS from being compiled #1969

Closed

pascaldls mentioned this issue Jun 23, 2020

Laravel Mix saves js files to wrong path when chunkFilename is set for chunks and generates invalid manifest file #1999

Closed

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

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

Comments

rderimay commented Jan 4, 2019

Description:

Steps To Reproduce:

rderimay commented Jan 4, 2019

dolbex commented Jan 6, 2019

randompixel commented Jan 7, 2019

JeffreyWay commented Jan 8, 2019

dolbex commented Jan 8, 2019

nelson6e65 commented Feb 6, 2019

njoguamos commented Feb 16, 2019

stephan-v commented Feb 26, 2019

elramus commented Mar 6, 2019 • edited

FireworksX commented Apr 12, 2019

viral-vector commented May 11, 2019

vesaka commented Jun 19, 2019

plumpboy commented Jul 21, 2019

rmondesilva commented Aug 30, 2019 • edited

plumpboy commented Nov 6, 2019

gtempesta commented Nov 9, 2019

farums commented Jan 18, 2020 • edited

mcanvar commented Jan 22, 2020

chinloyal commented Feb 11, 2020

irving-caamal commented Feb 14, 2020

irving-caamal commented Feb 14, 2020

ppshobi commented Mar 29, 2020

paullaffitte commented Apr 2, 2020 • edited

jnickzlim commented Apr 25, 2020

ilamp commented May 7, 2020

ilamp commented May 14, 2020 • edited

chrisgrim commented May 31, 2020

ilamp commented May 31, 2020

HartleySan commented Jun 9, 2020

chrisgrim commented Jun 9, 2020

HartleySan commented Jun 9, 2020 • edited

chrisgrim commented Jun 9, 2020

HartleySan commented Jun 9, 2020

chrisgrim commented Jun 9, 2020

ilamp commented Jun 9, 2020

HartleySan commented Jun 9, 2020

gtempesta commented Jun 10, 2020 • edited

HartleySan commented Jun 10, 2020

Ragash commented Jun 16, 2020

HartleySan commented Jun 16, 2020

danialdezfouli commented Jul 30, 2020

dkaufmann96 commented Sep 3, 2020

torian257x commented Sep 3, 2020 • edited

JBtje commented Sep 4, 2020

dkaufmann96 commented Sep 8, 2020

JeffreyWay commented Oct 10, 2020 • edited

HartleySan commented Oct 10, 2020

JeffreyWay commented Oct 10, 2020

kissjacky commented Nov 18, 2020

Tofandel commented Jun 17, 2021 • edited

AleksandrMihasenko commented Jul 15, 2021

saas786 commented Jan 16, 2023

elramus commented Mar 6, 2019 •

edited

rmondesilva commented Aug 30, 2019 •

edited

farums commented Jan 18, 2020 •

edited

paullaffitte commented Apr 2, 2020 •

edited

ilamp commented May 14, 2020 •

edited

HartleySan commented Jun 9, 2020 •

edited

gtempesta commented Jun 10, 2020 •

edited

torian257x commented Sep 3, 2020 •

edited

JeffreyWay commented Oct 10, 2020 •

edited

Tofandel commented Jun 17, 2021 •

edited