Search code examples
cssspringspring-bootthymeleafstylesheet

Trouble linking Stylesheet in Spring with Thymeleaf

So I've been struggling with this for a while and still can't figure it out.

I'm not able to make the external CSS file to work, the browser always gives me a 200 success message but the file never loads.

I've tried many different ways but this is how it looks at the moment:

Linking in the HTML File:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head> 
    <title>Tourverwalter</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/myStyle.css}" />
</head>

The CSS File: 

body {
    background-color: lightblue;
    text-align: center;
}
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 20%;
    cursor: pointer;
}

header{
    vertical-align: top;
}

.container {
    width: 75%;
    height: 30px;
    padding: 10px;
}

.left {
    width: 40%;
    height:30px;
    float: left;
}

.right {
    margin-left: 60%;
    height: 30px;
}

The WebMcvConfig File:

package ese4.configuration;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Bean
    public BCryptPasswordEncoder passwordEncoder() {
        BCryptPasswordEncoder bCryptPasswordEncoder = new BCryptPasswordEncoder();
        return bCryptPasswordEncoder;
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
          registry.addResourceHandler("/assets/**").addResourceLocations("classpath:/assets/");

    }

}

And the folder Hierarchy: Folder Hierarchy

Solution

  • If you are using Spring Boot, I would suggest that you change your structure to:

    src/main/resources/static/css

    And then you can remove the overridden addResourceHandlers method. Spring Boot will use the static folder to serve your static content.

    Then you would update your link to:

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

    Aside: you will also want to include the href path to the css so that when you open the file in a browser without loading Spring Boot, you can still see the effect of the CSS. This is a huge advantage to using Thymeleaf since your UI person doesn't need to know a thing about Java or Spring to see a formatted page.

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

    Finally, your other method can be simplified to:

    @Bean
public PasswordEncoder passwordEncoder() {
    return new BCryptPasswordEncoder();
}