web-dev-qa-db-fra.com

Botte de printemps avec Thymeleaf - css introuvable

Le premier à dire est que je cherche une solution depuis un moment maintenant et que je suis tout à fait désespéré maintenant.

Je ne peux pas rendre le fichier css accessible depuis la page html lorsqu'il est exécuté par 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/*");
    }
}

structure de dossier:

folder structure

J'ai essayé de placer le dossier css dans un dossier static et/ou de supprimer addResourcesHandlers, de faire référence au fichier css par chemin relatif et d'autres éléments. Rien ne semble résoudre ce problème. S'il vous plaît, dites-moi aussi si vous avez essayé de résoudre ce problème mais que vous n'avez pas trouvé de solution, de sorte que je sache que je ne suis pas ignoré.

javaspring-bootthymeleaf
8
Bato

Le problème était l'annotation @EnableWebMvc dans le fichier Application.Java. Dès que j'ai supprimé celui-ci, le css a commencé à être disponible à localhost:8080/css/style.css mais n'a pas été appliqué. Jusqu'à présent, je n'ai pas trouvé la raison pour laquelle le @EnableWebMvc était à l'origine du problème.

Ensuite, j'ai supprimé un contrôleur mappé sur /** que j'avais implémenté afin d'afficher la page d'erreur personnalisée.

@RequestMapping("/**")
public String notFound() {
    return "errors/404";
}

Après avoir également retiré celui-ci, mes css fonctionnent. =) 

4
Bato

1. Utilisation du chemin de ressource personnalisé

Dans votre configuration Web

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

Placez votre fichier style.css dans ce dossier

src/main/resources/assets/css/

Après cela dans vos vues 

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

.

2. Utilisation de chemins prédéfinis dans une initialisation de printemps

Supprimer addResourceHandlers de votre configuration Web

Placez le style.css dans l'un des dossiers suivants

  • 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/

Et dans la vue

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

.

REMARQUE: Vous pouvez supprimer le dossier assets ici. Si vous souhaitez le faire, supprimez-le du dossier de ressources prédéfini ainsi que de la vue th:href. Mais je l'ai gardé tel quel car vous avez explicitement mentionné le chemin assets/ dans votre question. Je pense donc que votre exigence est d'avoir assets/ dans l'URL de votre ressource.

25
Faraj Farook

Si vous mettez vos css dans le dossier statique, vous n'avez pas besoin de la méthode addResourceHandlers.

.../static/css/app.css

Ou si vous voulez vraiment les mettre dans le dossier assets:

.addResourceLocations("classpath:/assets/") <-- without the * at the end
.../assets/css/app/css

dans les deux cas, le css devrait être disponible via

th:href="@{/css/app.css}"
2
MystyxMac

Mon conseil est de placer (à nouveau) le dossier css dans le dossier static, supprimez addResourcesHandlers et accédez à css avec un chemin absolu (par exemple, /css/style.css).

0
Sezin Karli

Placez votre dossier css dans resources/static folder

0
L01c