Development mode hot reload not working for component styles

After spending half a day trying to get styles inside the components folder of a theme to work, only to realize it only works if I also have something else in the app that triggers a frontend build, I stumbled upon the next obstacle:

Dev mode hot reload sort of works, if I change something in styles.css in my theme, the page reloads and the changes take effect.

However, if I change something inside the components sub-folder, the page does reload, but styles don’t take effect unless I restart the application. At that point it logs. Detected changed frontend files: -themes/mytheme/components/vaadin-text-field.css and the changes are applied.

Any idea what to do so that they would be applied immediately?

Do you have frontend hot deploy / vite active?

With “vaadin.frontend.hotdeploy=true” it should work

That does indeed work, thank you!

So unless that property is set, the frontend live reload only reloads files as is, but doesn’t compile anything etc?

Wasn’t that the default behavior before?

It was changed in V24 as mentioned in the release blog post and docs :slightly_smiling_face:

But nevertheless I think your issue still stands and the new mode should still be able to reload those files (at least I would hope so)

Also you can migrate your css file: Upgrading Guide | Vaadin Docs
So it will be hot reloaded and use the standard API.

vaadin.frontend.hotdeploy=false is new and the default. It makes the startup of a Vaadin app blazing fast but you are losing the hot reload for the components css file and javascript.

^(if set to false / the default)

Yes :D. (fixed, hopefully easier to understand)

Cool, I don’t have anything to rewrite at the moment, I’m evaluating some things for a V8->V24 migration. Haven’t used Vaadin 10+ that much in the last year or so, so I went by the documentation I found.

I did notice that it was fast! Does the new styling approach imply that you shouldn’t use the theme components subfolder? Should you use themes at all?

Long version (but worth reading) of the comment @faithful-emu is currently typing I guess :sweat_smile: https://vaadin.com/blog/simplified-theming-in-vaadin-24

Let’s not write something useful :slightly_smiling_face: , the link and this one Upgrading Guide | Vaadin Docs should be already fine

But, in short, creating a theme is the recommended way, only the recommendation for the components folder has been changed.

I’ll have a read, I did try to find some documentation but I missed these ones. Sounds promising, thank you very much for the help :slightly_smiling_face: