Search code examples
htmlcssspringthymeleaf

When I run my Spring Boot Project with Thymeleaf, the browser won't load the css files but path for href and th:href is correct

so I read a lot of articles and threads about my problem, like these ones:

Refused to apply style because its MIME type ('application/json') is not a supported

https://github.com/froala/angular-froala/issues/170

But none of the answers can actually help me so I am asking my own question.

The current situation is:

I have a Spring Boot Project using thymeleaf and I have an html file under resources/templates and I also do have a css under ressources/templates/css.

Here is the structure:

  • src
    • main
      • resources
        • static
          • css
            • "my css file"
        • templates
          • "my html file"

Here is my html file:

<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Welcome to Mreza Mladih</title>
        <link rel="stylesheet" type="text/css" href="../static/css/styles.css" th:href="@{../static/css/styles.css}">
        <link href="https://fonts.googleapis.com/css2?family=Lato&family=Raleway&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
    </head>

And after running the project, google chrome won't load the css file:

Refused to apply style from...

Furthermore:

@Configuration
@EnableWebSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter  {    
@Override
        protected void configure(HttpSecurity http) throws Exception {
            http.authorizeRequests().antMatchers(
                    "/registration**",
                    "/js/**",
                    "/static/css/**",
                    "/static/img/**").permitAll()
                    .anyRequest().authenticated()
                    .and()
                    .formLogin()
                    .loginPage("/")
                    .permitAll()
                    .and()
                    .logout()
                    .invalidateHttpSession(true)
                    .clearAuthentication(true)
                    .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
                    .logoutSuccessUrl("/login?logout")
                    .permitAll();
        }
}

The funny thing about this is that my css actually is correct and it works! I use intellij and the IDE has a preview feature for html files and it actually works.

It would be really great if someone can help and thanks to you!

Greetings from Germany

Solution

  • Spring Boot serves anything that is in src/main/resources/static at the root of your application.

    So the URL to use to get the CSS with Thymeleaf should be /css/styles.css.

    Edit your HTML file like this:

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

    In your security configuration, also use /css and not /static/css:

    .antMatchers(
                    "/registration**",
                    "/js/**",
                    "/css/**",
                    "/img/**").permitAll()

    You can also use:

    http.authorizeRequests()
    .requestMatchers(PathRequest.toStaticResources().atCommonLocations())
         .permitAll()
    .antMatchers("/registration**",
                 "/img/**")
        .permitAll()

    PathRequest.toStaticResources().atCommonLocations() includes /css/*, /js/*, /images/*, /webjars/* and favicon.ico.