Fix location path to .css with Thymeleaf (Spring Boot)

Question

I'm working on a project with Spring Boot. I have a main.css file under /src/main/resources/static/css/

I use this thymeleaf code to inject the .css file into a .html file from the /templates folder:

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

I can open it respectively via http://localhost:1126/css/main.css

I use this .html as a detailed error page. So if an URL doesn't exists, show this .html. If the URL is with "one depth" (for example localhost:1126/something) it works fine (.html is shown and .css is loaded).
But if I use URLs with at least "two depths", or even with an "/" at the end (for example localhost:1126/something/ or localhost:1126/something/anything) it doesn't work (.html is shown but .css IS NOT loaded).

The problem is that in the second case Spring try to find the .css file under localhost:1126/something/css/main.css

Things I've tried so far:
use th:href="@{/css/main.css}" instead of th:href="@{css/main.css}"

AND

@SpringBootApplication
@EnableWebMvc
public class SpringBootProjectApplication implements WebMvcConfigurer {
    public static void main(String[] args) {
    SpringApplication.run(SpringBootProjectApplication.class, args);
    }
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/css/**").addResourceLocations("classpath:/css/");
    }
}

I have found these threads with no answers for my problem:

Thymeleaf, IntelliJ and Spring Boot not loading CSS files correctly
Spring Boot, Thymeleaf and CSS
CSS file cannot be located thymeleaf Spring Boot

Ali D.A. · Accepted Answer · 2020-06-20 13:55:14Z

0

Spring boot default BasicErrorController would directly look at src/main/resources/templates/ folder if you add your error html page there as "error.html" you can show that whenever error occurs

answered Jun 20, 2020 at 13:55

Ali D.A.

1541 gold badge2 silver badges10 bronze badges

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

3 Comments

tibotka Over a year ago

The html is shown correctly, my problem is that if the URL has more than one "tag" from the root (like localhost:port/onetag/anothertag), the css file is not loaded.

Ali D.A. Over a year ago

if there isn't any request mapping that handle your uri with one more slash or whatever , that would be an error , I guess I couldn't understand you

tibotka Over a year ago

It's perfectly OK that it is an error. The question: why doesn't the css file load with the html in case of URLs which contain at least two "/" (one after port number and one anywhere)?

crishym · Accepted Answer · 2021-08-22 17:25:34Z

0

I faced the same issue when my URL had multiple "/". But I did not make any special changes except for changing my css links as follows.

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

And same with javascript files as well.

On a side note, I don't use @EnableWebMvc annotation. It kinda messes up with automatic SpringMVC configuration.

answered Aug 22, 2021 at 17:25

crishym

235 bronze badges

Collectives™ on Stack Overflow

Fix location path to .css with Thymeleaf (Spring Boot)

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related