CSS file cannot be located thymeleaf Spring Boot

1
votes

I'm setting up a Spring boot server and I just can't get Thymeleaf to link to the CSS. I know there are a number of similar questions but none of them lead me to an answer.

This is the link included in my "home.html".

<link rel="stylesheet" type="text/css"
      href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />

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

bootstrap.min.css links fine but main.css gives me a 404.

Project Structure

This is what it shows me in the web console under networks, this url takes me to a Whitelabel error

Request URL:http://localhost:8080/styles/main.css
5
htmlcssspring-bootthymeleaf
What is the url of the page? is it '/' or something below ? - Yannic Klem
What do you mean Yannic? I'm just running it on localhost port 8080. - gregam3
the url in your browser if you navigate to home.html. is it just $host.$tld/ or is there something after the '/' For Example if its localhost:8080/home then you would look for the css in localhost:8080/home/styles/main.css where it isn't - Yannic Klem
The URL I am using to access this page is localhost:8080, sorry if we're not talking about the same thing. imgur.com/a/KyilF - gregam3
hm then the ref looks correct. Just to be sure (since i noticed that you just added this main.css). Did you reboot the spring boot application? And have you tried normal href? thref should not be necessary since you don't build a url based on properties - Yannic Klem

5 Answers

1
votes

By default there should be a static folder and your css content should be there or public all inside resources. Look at the springboot console when you run the app and look where it's serving resources from. Example below:

Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
Mapped URL path [/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]

Based on the info above set your resource location accordingly.

1
votes

Try creating a folder under resources called static and a subfolder called css and move your css files there, something like: resources/static/css/main.css

Then call it like:

<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"/>
0
votes

Have you tried:

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

?

0
votes

Your styles folder is located at the root of the classpath; it should be moved to a location that's actually configured by Spring Boot (see "serving static content" in the Spring Boot reference documentation).

In your case, moving src/main/resources/styles to src/main/resources/static/styles should do the trick.

0
votes
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(
            "/img/**",
            "/css/**",
            "/libs/**")
            .addResourceLocations(
                    "classpath:/static/img/",
                    "classpath:/static/css/",
                    "classpath:/static/libs/");
    }

}