Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[bug] CSS not updating with HMR
See original GitHub issueLooks like HMR is not working for .css files!
I’ve changed file src/Components/Nav/Nav.css and the browser’s console identified the change as you can see in the image:
But the change only get in place when I do a full reload on browser
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
Webpack 5 HMR not working for CSS updates #3064 - GitHub
Make whatever changes to SCSS files. Nothing changes until refresh. ... Check browser console and network requests on each update. hmr-console
Read more >Webpack HMR not updating in html file - Stack Overflow
My main problem is its compiling in the console but not updating in htm file actually..I have mentioned if (module.hot) module.hot.accept() in ...
Read more >Hot Module Replacement - webpack
HMR with Stylesheets ... Hot Module Replacement with CSS is actually fairly straightforward with the help of the style-loader . This loader uses...
Read more >Hot Module Replacement - SurviveJS
It enables an interface that makes it possible to swap modules live. For example, style-loader can update your CSS without forcing a refresh....
Read more >Vite+tailwind: css in components doesn't cause hot reload, but ...
vue show hmr reloading the vue file and the css, whereas ANY change to the component only update the css, even if it's...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I switched to
MiniCssExtractPluginin development. This will fix the initial flashing.Hey @lnfnunes thank you for your feedback. It’s actually still an open issue of the mini-css-extract-plugin package https://github.com/webpack-contrib/mini-css-extract-plugin/issues/34
But you are right, this is very annoying. I switched the default client development configuration to use
style-loaderinstead. This will allow the support of HMR for CSS. And it’s not a deal breaker becausemini-css-extract-pluginwill work just fine in production.I pushed this already ccfb73682f1127bd92a0ffee42ee4e2cacc7fdcf. Let me know if this fixes your issue.