user5139637 user5139637 - 3 months ago 58
CSS Question

How to add static files using Spring MVC and Thymeleaf

My question is how to add static files like CSS and image files so that I can use them. I am using Spring MVC and Thymeleaf. I looked at various posts on this subject, but they did't help me, so I am asking. As per those posts, I put my CSS and image file in the

resources/static/css
and
resources/static/images directory
.

demo

Under
templates
(under
webapp/WEB-INF/templates
) is where all my HTML files are stored, the ones who want to use the CSS and image files.

I have the following
LoginApplicationConfig
file. The very two bottom methods I included so that my HTML files could use the styles and image files:

@EnableWebMvc
@Configuration
@ComponentScan({ "com.myapp.spring.*" })
@Import(value = { LoginSecurityConfig.class })
public class LoginApplicationConfig extends WebMvcConfigurerAdapter implements ApplicationContextAware{

private ApplicationContext applicationContext;

@Override
public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
this.applicationContext = applicationContext;
}

@Bean
public ViewResolver viewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine());
resolver.setCharacterEncoding("UTF-8");
return resolver;
}

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

private ITemplateResolver templateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("/WEB-INF/templates/");
resolver.setTemplateMode(TemplateMode.HTML);
return resolver;
}

@Override
public void addResourceHandlers(final ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**").addResourceLocations("/resources/static/css").setCachePeriod(31556926);
registry.addResourceHandler("/resources/**").addResourceLocations("/resources/static/images").setCachePeriod(31556926);
}
@Override
public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
configurer.enable();
}

}


Then in my index.html file, I included the following line so I could include the style file (using thymeleaf):

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


But I keep getting the error that the stylesmd.css failed to load.

My questions:


  1. Is the placement of my styles and image files correct. That is, what folders should I specifically put them in. I tried various location like under the
    webapp
    and
    WEB-INF
    directory but that didn't work.

  2. Are the bottom two methods in
    LoginApplicationConfig
    required? In addition, I was a bit confused on what to include in the
    addResourceHandler(...)
    method and what in the
    addResourceLocations(...)
    method.

  3. Is my reference to the style sheet (using thymeleaf) correct?



I am aware a lot of content already exists on this question, but that did't work for me, so that's why I am asking.

Answer

This is how I made it work. Only one line suffice.

registry.addResourceHandler("/static/**").addResourceLocations("/static/");

And

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

If it keeps failing, try to move your "templates" folder into the resources folder as a subfolder.

Comments