Home > Software design >  css file is not recognized in Spring
css file is not recognized in Spring

Time:11-20

I am developing a site using Spring, Spring MVC, Thymeleaf and ran into the problem: css file with styles not being applied to my page. The structure of the project is as follows:

java
   com
      tournament
         config
            MySpringMVCDispatcherServletInitialize.java
            SpConfig.java
         controllers
            HomePageController.java
webapp
   WEB-INF
      views
         css
            style.css
         home_page.html

style.css:

p{
   font-size: 200%;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #336;
}
body{
   background-color: red;
}

home_page.html:

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

in SpConfig there are this configs:

@Configuration
@ComponentScan("com.tournament")
@EnableWebMvc
public class SpConfig implements WebMvcConfigurer {

    private final ApplicationContext applicationContext;

    @Autowired
    public SpringConfig(ApplicationContext applicationContext) {
        this.applicationContext = applicationContext;
    }

    @Bean
    public SpringResourceTemplateResolver templateResolver() {
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setApplicationContext(applicationContext);
        templateResolver.setPrefix("/WEB-INF/views/");
        templateResolver.setSuffix(".html");
        return templateResolver;
    }

    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver());
        templateEngine.setEnableSpringELCompiler(true);
        return templateEngine;
    }

    @Override
    public void configureViewResolvers(ViewResolverRegistry registry) {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine());
        registry.viewResolver(resolver);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry {
        registry.addResourceHandler("/css/**")
                .addResourceLocations("/WEB-INF/css/");
}

In home_page.html place the cursor on th:href="@{/css/style.css}", it seems correct path to css file, but when starting the server on the page home_page.html no styles which contained in style.css. So how can I to apply this style?

CodePudding user response:

Your directory structure shows that the css is in WEB-INF/views/css, but you configure /WEB-INF/css/ in addResourceLocations. According to https://www.baeldung.com/spring-mvc-static-resources, if you don't use the classpath: prefix in that string, then the path is relative to webapp/resources.

So or you need to move your CSS, or you will need to update the .addResourceLocations("/WEB-INF/css/") statement.

  • Related