Simple CSS Class injection isn't working

Flow
1

I want to set the CSS background property of a Vaadin Flow Div element with text as content.

Direct CSS property manipulation works fine
div.getStyle().set("background-color","yellow");

Next step - CSS class injection, but no method is working for me. What is wrong?

with best regards
Peter

/* frontend/styles/test.css */
.blog {
	background-color:yellow;
}

Inside the main class no method for class injection is working

@StyleSheet("./styles/test.css")
@Route("")
public class MainView extends VerticalLayout  {
    ......
	Div f = new Div();
	f.getElement().setProperty("innerHTML", loreIpsum);
	// div.getStyle().set("background-color","yellow"); - WORKS FINE
	f.setClassName("blog"); // DO NOT WORK
    // f.getElement().setAttribute("class","blog"); // DO NOT WORK
    // f.getElement().getClassList().add("blog"); // DO NOT WORK
	
	.....
2

Have you checked with Chrome developer tools network tab that the Browser succesfully loads test.css, i.e. there is no 404 there?

3

Thanks - you are right - the test.css is not loaded.

http://localhost:8080/blog/frontend/styles/test.css

Trying to load the css directly

Could not navigate to 'frontend/styles/test.css'
Reason: Couldn't find route for 'frontend/styles/test.css'

Available routes:
<root>
This detailed message is only shown when running in development mode.
4

Problem solved.

@CssImport("./styles/test.css")

instead of

@StyleSheet("./styles/test.css")

works for me!