Thymeleaf + CSS+SpringBoot

Question

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?

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. — Dimitri Mestdagh
– Dimitri Mestdagh, Commented Jan 11, 2017 at 10:11
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
– Lachezar Balev, Commented Jan 11, 2017 at 11:07

DimaSan · Accepted Answer · 2017-01-11 12:07:34Z

50

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" />

answered Jan 11, 2017 at 12:07

DimaSan

12.8k15 gold badges71 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sva605 Over a year ago

Why do we need both 'href' and 'th:href' simultaneously?

DimaSan Over a year ago

We can easily remove HTML and use only Thymeleaf's attributes. Please read the answers here stackoverflow.com/questions/39757974/…

alok Over a year ago

Not working for me giving error "cannot be context relative (/) or page relative unless you implement the org.thymeleaf.context.IWebContext"

user14773854 · Accepted Answer · 2024-03-09 03:40:58Z

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.

Semyon Evgrafov · Accepted Answer · 2020-10-15 21:31:25Z

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()

Collectives™ on Stack Overflow

Thymeleaf + CSS+SpringBoot

3 Answers 3

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Linked

Related