I am having an issue with @StyleSheet

I am having an issue with @StyleSheet

when i build production and upload it i get

Mixed Content: The page at ‘’ was loaded over HTTPS, but requested an insecure stylesheet ‘’. This request has been blocked; the content must be served over HTTPS.

I am unsure why its not using https to retrieve the styles works fine if i move them to frontend and use @CssImport but then i wont get fast reloading during development when i modify the css files anyway to tell it to get the css using https without having to manually specify the urls before productin in each class?


no idea why it wouldn’t use https to fetch the stylesheet, but you can get hot reloading of stylesheets at least by using the theme folder approach too


Actually didnt work when running production @StyleSheet will be http only @CssImport works but then live reload wont work when i modify it however moving the css files into frontend/themes/apptheme/ will make it say it reloaded but its not applying anything i still have to go into a view and make an edit and then save to force it to reload

hmm, what version of Vaadin are we talking here, and is it a spring-boot app?

Vaadin 24.1.4
and yes i am using it with spring boot


It’s weekend, don’t expect much answers. Your setup is literally the default setup, which normally doesn’t make such problems. Please show us more details what you are doing, like file structure, applying styles with for / in the shadow dom or others and so on - the more information, the easier to help you.

yeah i dont keep track of time thought it was friday :joy:.

Image 1 is where i currently put my css /frontend/apptheme/styles/*

Image 2 is how i get the style
however the image says @StyleSheet i atm are using @CssImport because thats the only one that allows produciton builds to get the css @StyleSheet in production will try and get it with http instead of https

I am applying the css to components with #.classNames().add(“class_name_here”)

Not sure what other information would be useful

If you import those three styles in your styles.css and remove the annotation, everything is going to Work - hot reload and production build

Yup, that should do it. More info on the application theme here: https://vaadin.com/docs/latest/styling/application-theme

That works thank you :slightly_smiling_face:

Will give that a read as well :smile: