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

Posted

技术标签:

【中文标题】CSS 样式表不适用于 Spring Security + Spring Boot + Thymeleaf【英文标题】：CSS stylesheet doesn't work with Spring Security + Spring Boot + Thymeleaf 【发布时间】：2021-01-17 14:51:46 【问题描述】：

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

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

MvcConfig ：

@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 (Thymeleaf)

<!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>

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

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

【问题讨论】：

„…我试图改变我的路径…“ – @Jqk3 – 你指的是什么“路径”？你的代码 sn-p 到底在哪里？ — „……或添加一个 href……” — 同样的问题。你对什么“添加一个href”？ TIA。 我这样尝试： 改变这个：th:href="@/static/css/style.css" „…然后改变这个：th:href="@/static/css/style.css"…“ -​​ 你改变了什么 来自？也就是说，它最初是什么？或者，如果您的回复是指该属性最初，那么您将th:href="@/static/css/style.css" 更改为的什么？ 我刚试了几个网址 „我刚刚尝试了几个网址“ -​​ 你试过the suggestions I've proposed中的任何一个吗？你的项目的目录结构是什么？这是一个非常重要的细节，你还没有说清楚。您的回复可以采用以下格式：„…/src/blah/foo/bar/…“。 TIA。 【参考方案1】：

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

冗长的版本

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

你原始问题中的sn-ps和你在cmets中的回复，建议你的项目是这样布局的……

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

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

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

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

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

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

/META-INF/resources/ /resources/ /static/ /public/ …

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

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

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

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

1 Add CSS and JS to Thymeleaf - Amy DeGregorio2 Using Thymeleaf - 官方文档3 Serving Static Web Content with Spring Boot — 春季博客

【讨论】：

以上是关于CSS 样式表不适用于 Spring Security + Spring Boot + Thymeleaf的主要内容，如果未能解决你的问题，请参考以下文章

CSS 不适用于 DOMPDF

Spring security @secure 不适用于角色层次结构

级联样式表不适用于角度Js

CSS 不适用于 IE 和 Firefox，但适用于 Chrome

CSS Clear Float 不适用于媒体查询

CSS 过渡不适用于反应和样式化的组件