Thymeleaf, IntelliJ and Spring Boot not loading CSS files correctly

Question

I have been experiencing this issues and each time, I only resolve it by creating a new project which appears to work. This time I intend to find out why this happens or I encounter it this often. CSS files get loaded into the server as HTML files and when I open then with the relative path, they open as HTML

Index file located under templates/index.html

  <!DOCTYPE html>
    <html lang="en"
           xmlns="http://www.w3.org/1999/xhtml"
           xmlns:th="http://www.thymeleaf.org">
     <head>
            <meta charset="UTF-8" />
            <title>Title</title>
            <link type="text/css" th:href="@{/css/styles.css}" href="../static/css/styles.css"
                  rel="stylesheet" />
        </head>
        <body>

    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>

    </body>
    </html>

This is my CSS file which is located under resources/static/css/styles.css

body {
    color: blue;
}

I have Spring security on my classpath so I configured security as this

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    private static final String[] PUBLIC_MATCHERS = {
            "/css/**",
            "/js/**",
            "/webjars/**",
            "/static/**"
    };

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .authorizeRequests().antMatchers(PUBLIC_MATCHERS).permitAll()
                .anyRequest().authenticated()
                .and().formLogin();
    }
}

I do not understand why the browser loads up as such

Seems like all resources are loaded successfully according to the network status

When I click on the styles.css, this is the output in the debugger. I don't know why

Any Help is much appreciated before I start up a new Project again. Thank you

Knight Rider · Accepted Answer · 2018-05-09 01:30:31Z

0

I was able to solve the problem after a series of test to produce this problem. The problem arises when I leave my mappings general as in allowing my controller to map directly to the root mapping.

Example is

@GetMapping // Here is the problem... This was the only method in the controller
public String home() {
  return "index";
}

I fixed this by setting a mapping like

@GetMapping(value= "/")
public String home() {
   return "index";
}

or by using the Class Level Mapping

@RequestMapping(value= "/")
public class Controller {

   public String home() {
     return "home";
   }

}

answered May 9, 2018 at 1:30

Knight Rider

1,2562 gold badges14 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Thymeleaf, IntelliJ and Spring Boot not loading CSS files correctly

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related