Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SpringBoot with Thymeleaf - css not found

First to say is that I've been searching for a solution for a while now and I'm quite desperate now.

I cannot get the css file to be accessible from html page when run by Spring Boot.

html.file

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head lang="en">
        <title th:text='#{Title}'>AntiIntruder</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" media="all" href="../assets/css/style.css" th:href="@{/css/style.css}" />
    </head>
    <body>
...

Application.java

@SpringBootApplication // adds @Configuration, @EnableAutoConfiguration, @ComponentScan
@EnableWebMvc
public class Application extends WebMvcConfigurerAdapter {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/assets/**").addResourceLocations("classpath:/assets/*");
    }
}

folder structure:

folder structure

I've tried putting the css folder into a static folder and/or removing the addResourcesHandlers, referencing to the css by relative path and some other things. Nothing seems to resolve this. Please, let me know also if you tried to solve this but did not find a solution, so that I know, that I'm not ignored.

like image 389
Bato Avatar asked Apr 10 '15 13:04

Bato


People also ask

How do I add CSS to Thymeleaf?

Adding CSS. We load the stylesheet using the link tag with Thymeleaf's special th:href attribute. If we've used the expected directory structure, we only need to specify the path below src/main/resources/static. In this case, that's /styles/cssandjs/main.

How do I enable Thymeleaf in spring boot?

Spring Boot will provide auto-configuration for Thymeleaf. Add spring-boot-starter-thymeleaf dependency in pom. xml to enable this auto-configuration. No other configurations required, Spring Boot will inject all required configuration to work with Thymeleaf.

Is Thymeleaf fully integrated with Spring?

It provides full integration with Spring Framework. It applies a set of transformations to template files in order to display data or text produced by the application. It is appropriate for serving XHTML/HTML5 in web applications. The goal of Thymeleaf is to provide a stylish and well-formed way of creating templates.


1 Answers

1. Using Custom Resource Path

In your Web Config

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
  if (!registry.hasMappingForPattern("/assets/**")) {
     registry.addResourceHandler("/assets/**").addResourceLocations("classpath:/assets/");
  }
}

Put your style.css file inside this folder

src/main/resources/assets/css/

After that in your views

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

.

2. Using predefined paths in spring boot

Remove addResourceHandlers from your web config

Put the style.css inside any of the following folders

  • src/main/resources/META-INF/resources/assets/css
  • src/main/resources/resources/assets/css/
  • src/main/resources/static/assets/css/
  • src/main/resources/public/assets/css/

And in the view

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

.

NOTE: You can remove the assets folder here. If you want to do it, remove it from the predefined resource folder and also from the view th:href. But i kept it as it is because, you explicitly mentioned the assets/ path in your question. So I belive it's your requirement to have assets/ in your resource URL.

like image 93
Faraj Farook Avatar answered Sep 28 '22 06:09

Faraj Farook