search

harlan-zw / nuxt-webpack-optimisations

Make your Nuxt.js webpack builds faster ⚡
271 stars 8 forks source link

Missing CSS after second npm run dev #37

Open ThunderWorm opened 2 years ago

ThunderWorm commented 2 years ago

There is no CSS applied when rerunning npm run dev after the initial caching has finished I have set up everything as described, using nuxt 2.15.8, added what was needed in buildModules to enable optimisation, didn't change the default settings. After the first npm run dev, when the cache is initialized everything worked properly. Stopped dev server, started the dev server again using npm run dev, it went pretty fast, and after it finished there was no CSS used on the website. If I disabled the cacheLoader, there were images, but the startup speed was back to its original slow speed.

To Reproduce Steps to reproduce the behavior:

  1. npm install nuxt-webpack-optimisations
  2. Add 'nuxt-webpack-optimisations' to nuxt.config.js buildModules
  3. npm run dev
  4. Everything is fine after it fnishes
  5. Stop dev server
  6. npm run dev
  7. After the dev server starts, CSS disappears, is not applied anymore.

There should be CSS after caching also It should load CSS even after caching is initialized and dev server restarted.

Screenshots - This is how main CSS is loaded in the layout files image

SliverYuki commented 2 years ago

same as my project. Is there any solution please?

emielmolenaar commented 2 years ago

Same issue here. You can work around this for now by setting cacheLoader to false: see https://github.com/harlan-zw/nuxt-webpack-optimisations#features-1 .

GuyMograbi commented 2 years ago

If someone is running into the CSS issue - check if you're using "extractCss".

Webpack's cache: true (probably used by this library) is not compatible with "extractCss" See issue: https://github.com/webpack/webpack/issues/12458

By removing the extractCSS I was able to get the build to be twice as fast.