Where to add the CSS file Vaadin 14

General
1

Hey, in the tutorials it says that i have to put my CSS file in the webapp/frontend map. But that map does not exsist anymore in the webapp directory.

Where am i supposed to put it now because i tried the frontend map in target, andthe webapp map itself but it does not apply anything and gives errors.

I am using a plain java servlet.

17828272.png
17828275.png
17828278.png

2

See [This informative Stackoverflow post]
(https://stackoverflow.com/a/57553974/3441504) to find out correct placement of static files like css, js, images - and also how to import them.

In your case, put the css file (without <custom-style><style></style></custom-style> html wrapping - just pure css!) in {project} > frontend folder, then import it in the MainView using @CssImport("./style.css")

3

Kaspar Scherrer:
See [This informative Stackoverflow post]
(https://stackoverflow.com/a/57553974/3441504) to find out correct placement of static files like css, js, images - and also how to import them.

In your case, put the css file (without <custom-style> html wrapping - just pure css!) in {project} > frontend folder, then import it in the MainView using @CssImport("./style.css")

Did exactly what you said but it does not work.
17828397.png
17828400.png

4
  1. your style.css seems to be in {project} > frontend > styles so this styles folder must be present in the CssImport Annotation:
@CssImport("./styles/style.css")
  1. you still don’t have pure css in your styles.css file, you still wrapped it inside <style> tags. How it should look instead:
.main-view {
	color: red;
}
5

Thank you so much for the help. The documents aren’t really clear on the Vaadin website, so sorry if this was a noob question :smiley: