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.