UI.getCurrent().getPage().addStyleSheet(abc.css) can't load file during runtime

I load special style sheets into my application based on loaded modules based on an environment variable.
Before upgrading from 14 to 23 the files were loaded. Now it seems they are blocked as I get an 404 error, but they are at the correct location (the same as the other css files in the target folder after building).

What is the “correct” location accoring to you and what is the url/relative path you try to load them?

I placed the css files in src/main/resources/META-INF/resources/frontend.
During maven build it is transferred into target/flow-frontend.
My MainView has ‘UI.getCurrent().getPage().addStyleSheet(“abc.css”);’ in the constructor.

The Browser Developer Tools show me the following error messages:

  1. HTTP 404 GET http://localhost:8082/abc.css
  2. The ressoucre from http://localhost:8082/abc.css could not be loaded due to MIME-Type conflict (“application/json”" blocked (X-Content-Type: nosniff)
  3. Error loading http://localhost:8082/abc.css
  4. http://localhost:8082/abc.css’ could not be loaded

When your webserver returns application/json for a .css file, then you have something wrong in your config. I have my css files under frontend/styles and there they are correctly loaded

I got my security config based on the tutorial and documentation. And other than that (and the appshellconfig) and the vaadin version nothing changed during the upgrade. As I don’t intentionally block certain mime types.

Here’s my security configuration.
new_4.txt (2.36 KB)

hey there, I think I got a similar issue.
Is the folder target/flow-frontend correct?
Shouldn’t the files be in:
flow-client/META-INF/frontend ?
I’m using SpringBoot and copied the following setup:
So my files are in:

Do I need to set the vaadin.frontend.frontend.folder path or something similar? Because it is still not finding my css files…

Your folder structure looks like Vaadin 8 and not like it should be done in flow. The best place to put css files is directly or in sub folders of your themes located at root of your project in /frontend

@ludicrous-meerkat give the official docs a look. There’s a nice cheat sheet for resource loading and expected locations for different kind of files. https://vaadin.com/docs/latest/advanced/loading-resources

Importing with @CssImport works fine with files in the same location, but I don’t have the names of the css files at this point in my code flow. I think it’s a problem with my security setup, since the same code runs fine in an example project and in the old project setup with vaadin 14.

thanks, yes it seems that the tutorial and structure is from Vaadin8. In our SpringBoot build folder we only have: Where would you put the frontend folder??

That looks like Gradle… no idea :sweat_smile: I can just recommend to get a starter from start.vaadin.com and take a look at the file structure from there

yes :relieved: gradle → maven → springboot
I’ll try, thanks anyway :+1: