Thymeleaf + CSS+SpringBoot

25
votes

I have a problem with CSS and Thymeleaf.

In my Spring boot app, I have this structure:

  • src/main/resource/static/css (for css files)
  • src/main/resource/static/templates (for html file)

Now, with my html page named ErrorPage and css file named Layout.css, using Thymeleaf I have, in the head of ErrorPage:

<link href="../css/Layout.css" th:href="@{css/Layout.css}" type="text/css" />

But this does not work.

What am I doing wrong?

3
cssspring-bootthymeleaf
Can you verify this, is your ErrorPage within src/main/resources/static/templates or src/main/resources/templates? If it's within the first one, it means it's handled as a static resource, which means Thymeleaf won't be used to render your page. If it's in the second one, then it can use Thymeleaf, but it probably also means you're using it as a view within a controller. You have to work relatively upon the location of the controller, rather than the folder structure. Share your controller/configuration that uses this errorpage HTML. – g00glen00b
What does not work? The ErrorPage does not render or it renders but the css file can't be downloaded? Do you use spring security? – Lachezar Balev

3 Answers

44
votes

Move your template folder right under resources:

  • src/main/resource/static/css (for CSS files);
  • src/main/resource/templates (for HTML templates).

Then correct the link tag as follows:

<link href="../static/css/Layout.css" th:href="@{/css/Layout.css}" rel="stylesheet" />
4
votes

Move your template folder right under resources:

src/main/resources/static/css (for CSS files);
src/main/resources/templates (for HTML templates).

Then correct the link tag as follows (relative or absolute):

<link href="../css/firstcss.css" rel="stylesheet">
<link href="/css/secondcss.css" rel="stylesheet">

The old solution with static in front doesn't work for me.

2
votes

The main culprit of this behaviour is a custom security configuration which is very likely you are doing in your WebSecurityConfigurerAdapter subclass. If you use SpringBoot 2+ version you should add the following line in your WebSecurityConfigurerAdapter configuration

.requestMatchers(PathRequest.toStaticResources().atCommonLocations()).permitAll()