时间戳

首页 > 解决方案 > CSS 样式表不适用于 Spring Security + Spring Boot + Thymeleaf

css - CSS 样式表不适用于 Spring Security + Spring Boot + Thymeleaf

问题描述

经过大量研究，我一直无法找到解决方案。我有一个用 Spring Boot + Spring Security + Thymeleaf 实现的项目。

我有一个 REST API 多模块项目和一个用 Thymeleaf 构建的 Web 客户端。我的问题是我似乎无法在我的 Thymeleaf 页面中包含我的 CSS 样式表。

配置文件：

@Configuration
public class MvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.
                addResourceHandler(
                "/css/**",
                "/img/**").
                addResourceLocations(
                        "classpath:/resources/static/img",
                        "classpath:/resources/static/css");
    }

我的 HTML（百里香叶）

<!DOCTYPE HTML >

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head xmlns:th="http://www.thymeleaf.org">
    <title>Bibliothèque d'OC</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/style.css}">
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

我尝试更改标记 ( )th:href属性上设置的路径值。而且我还尝试向标签添加属性；没有人帮忙。我找不到解决方案。linkth:href="@{/static/css/style.css}"hreflink

有人可以提出解决方案吗？

标签： cssspringspring-bootspring-securitythymeleaf

解决方案

TL;DR — 更改th:href="@{/static/css/style.css}"为th:href="@{/css/style.css}".

长篇大论的版本

Thymeleaf 期望项目具有特定的默认目录结构：src/main/resources/static. 您为 Thymeleaf 的特殊属性设置的路径必须与预期的目录结构相关。1th:href

您原始问题中的片段和评论中的回复表明您的项目是这样布局的……</p> 

…
└───src
    └───main
        │
        └───resources
            ├───static
            │   └───css
            └───templates

如果是这种情况，那么您需要提供给 Thymeleaf 的样式表的相对路径应该是：th:href="@{/css/style.css}".

如果不是这种情况，并且您的项目的目录结构与我上面说明的不同，那么请在此答案的评论中分享您的目录结构到底是什么。

我注意到您th两次声明了 Thymeleaf 命名空间；一次在html标签中，然后再次在head标签中。应该只有一个命名空间声明。2我的建议是删除head标签中的那个。

从 spring.io 上的 2013 年博客文章中考虑这一点...<sup> 3

…Spring Boot 将自动添加位于以下任何目录中的静态 Web 资源：

  • /META-INF/resources/
  • /resources/
  • /static/
  • /public/ …</li>

据此，您的应用程序配置的这一部分不仅是不必要的，而且我有一种预感，它可能是您问题的根本原因……</p> 

…
registry.
        addResourceHandler(
        "/css/**",
        "/img/**").
        addResourceLocations(
                "classpath:/resources/static/img",
                "classpath:/resources/static/css");
…

我已经实现了至少十几个不同的提供静态内容的 Spring Boot 应用程序。我从来没有像你那样实现任何配置代码。

我的建议是——除了th:href属性和th命名空间声明建议之外——删除那些不必要的registry.addResourceHandler( … )配置。






1 将 CSS 和 JS 添加到 Thymeleaf  — <em>Amy DeGregorio
2 使用 Thymeleaf  — <em>官方文档
3 使用 Spring Boot 提供静态 Web 内容 — <em>Spring 博客

推荐阅读