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

Maido 47 Published at Dev

Maido 47

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

Wim Deblauwe

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.