Dynamic Web App und Thymeleaf CSS einbinden?

Moin.

Statt JSP wollte ich ich nun Thymeleaf umschwenken. Allerdings hab ich bei Thymeleaf Probleme, die CSS Datei einzubinden. Meine Recherchen haben ergeben, dass Thymeleaf von Haus aus in src/main/resources/static/ nach Ressourcen sucht. Die hab ich auch da reingepackt. css/style.css

Mein HTML Dokument sieht die Verlinkung Folgendermaßen aus:

 <link th:href="@{/css/style.css}" rel="stylesheet" />

Meine HTML Seite befindet sich direkt im webapp Ordner.

Ich hab auch versucht die HTML Seite in den templates Ordner zu packen. Leider ebenfalls ohne Ergebnis.

Pro Forma der CSS Inhalt :)

body{
	background-color: red;
}

Hier auch mal ein Bild von der Ordnerstruktur:

Answer 1

[regex9]

Die HTML-Datei gehört in den templates-Ordner (src/main/resource/templates). Der Ablageort deiner CSS und der Pfad (href) scheinen korrekt zu sein.

Schau doch bei Aufruf der Webseite einmal in den Entwicklertools, ob die Dateien und der korrekte Pfad (link-Tag) entsprechend ausgeliefert werden (in Chrome: Sources-Tab und natürlich im Webinspektor).

Zudem kannst du dir den Artikel von baeldung anschauen / versuchen, nachzubauen: https://www.baeldung.com/spring-thymeleaf-css-js

Comments

[Nevron]

Hallo an alle,

hier ist die Lösung:

für Thymeleaf gilt, dass der Präfix /templates/ und der Suffix .html in der Voreinstellung sein muss. Das heißt, die Datei muss sich in

/src/main/resources/templates/meineHtmlSeite.html

Ich habe aber gelesen, dass man das wohl irgendwo umstellen kann. Aber im allgemeinen, muss es unter diesem Pfad liegen. Und da es zusammengehört, will erwähnt sein, dass der Pfad für statische Ressourcen bei Thymeleaf unter

/src/main/resources/templates/meineHtmlSeite.html

liegen müssen.

Da meine HTML Seite aber direkt im webapp Rootverzeichnis lag und ich die entsprechenden Einstellungen nicht vorgenommen habe, fand er natürlich die Resource nicht.

Viel Spaß beim programmieren

[Nevron]

Auf der Seite war ich schon und hab es auch nachgebaut. Es will einfach nicht klappen. Er lädt immer die HTML Datei aber ohne das Stylesheet.

Schau doch bei Aufruf der Webseite einmal in den Entwicklertools, ob die Dateien und der korrekte Pfad ( link-Tag) entsprechend ausgeliefert werden (in Chrome:  Sources-Tab und natürlich im Webinspektor).

Hab mir das angeschaut. Hab mir das auch mal angeschaut wie es aussehen müsste anhand einer anderen HTML und CSS Datei und kann daher sagen, dass die CSS Datei da definitiv fehlt.

Ich werds schon finden.

Answer 2

[geri3d]

Wenn das die Struktur auf der Webseite ist dann müsste es so gehen:

<link th:href="@{../recources/static/css/style.css}" rel="stylesheet" />

Woher ich das weiß: eigene Erfahrung

Comments

[Nevron]

Das hatte ich auch schon versucht und gerade nochmal. Leider nein.