Hot reloading does not work for HTML templates
See original GitHub issueVersion
@nuxtjs/tailwindcss: 4.1.1 nuxt: 2.15.6
Reproduction Link
https://rechenknecht.net/lmm/nuxt-tailwind-bug-report
Steps to reproduce
- Clone repo
- Run
yarn dev
- Change any text in
pages/index.vue
(e.g. schaukasten -> schaukasten2)
What is Expected?
- Hot reloading should work
What is actually happening?
- Text is not updated until page in browser is manually refreshed
- A loading indicator is shown in the bottom right corner (file change is detected)
Notes
- Hot reloading works for removing components in the template (e.g. removing or adding the
Logo
component) - Hot reloading works for scripts
- Hot reloading works for styles
- Works with other UI frameworks like vuetify
Issue Analytics
- State:
- Created 2 years ago
- Reactions:23
- Comments:54
Top Results From Across the Web
WebPack Hot Reload not working for HTML files
I want to have it so when i save my file the browser updates its content without fully reloading the page. <pre> const...
Read more >hot reloading code and html templates for web app development
Hi all, I often use serve/servlet to launch my webapp. Often from the repl while I'm developing. One major annoyance I have, however,...
Read more >Hot Reload does not update Shell templates
A fix for this issue has been internally implemented and is being prepared for release. We'll update you once it becomes available for...
Read more >Difference between Hot Reloading and Live ... - GeeksforGeeks
Hot reloading and Live reloading are something that Reacts Native developers use on regular basis. Both have their own advantages and ...
Read more >Write and debug code by using Hot Reload - Visual Studio ...
Update running code with Hot Reload · Open a project based on a supported application type. · Make sure that Enable native code...
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 FreeTop 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
Top GitHub Comments
I managed to pinpoint the issue, for more details see: https://github.com/nuxt/postcss8/issues/24
Temporary Fix
You’re likely experiencing this issue if you’re:
2.15.4
or later;@nuxtjs/tailwindcss 4
, your are).Disabling
icss
compile type in your build options should fix the issue (but might introduce others if you’re relying on SASS, see: https://github.com/nuxt/nuxt.js/pull/9014):Cheers!
Good day…
I have been playing around with it for a bit, and i noticed that it keeps working fine when there is no other css defined within
<style></style>
, once you add anything to it id,class,etc it stops the hot reload from working, removing it again needs a manual refresh to allow the hot reload to start working again, inline styles seem to work fine as well,this also only seems to happen when the styles are defined within that component or page, as when defining a scoped style in
layout/default.vue
this does not effect the hot reload of let say thepages/index.vue
so a kind of bad workaround would be, to not define any styles within the style tags, and put everything inline…
i hope this gets fixed soon, as this kind of sucks… i would help my self but i would not know were to start…
kind regards.