Thymeleaf无法从模板片段加载CSS样式问题求助

1. 确认静态资源路径与Thymeleaf引用语法 #

Spring Boot默认将静态资源（CSS、JS、图片）放在src/main/resources/static目录下，比如你的CSS文件路径是src/main/resources/static/css/style.css，那么在Thymeleaf中必须用绝对路径表达式引用：

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

不要用相对路径（比如../css/style.css），不同层级页面引用模板片段时，相对路径会因页面位置变化失效。

2. 检查模板片段中的CSS引用 #

确保Layouts.html里的头部片段已使用th:href而非原生href，原生路径不会被Thymeleaf解析：

<!-- 错误写法 -->
<link rel="stylesheet" href="css/style.css">

<!-- 正确写法 -->
<link rel="stylesheet" th:href="@{/css/style.css}">

3. 验证静态资源可直接访问 #

启动应用后，在浏览器地址栏直接访问CSS的URL（如http://localhost:8080/css/style.css）：

• 若能显示CSS内容，说明静态资源映射正常；
• 若返回404，检查：
  • CSS文件是否确实在static目录下，文件名、大小写是否匹配（Linux环境区分大小写）；
  • 是否自定义了WebMvcConfigurer并覆盖addResourceHandlers导致默认映射失效，需确保添加静态资源映射：

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

4. 清除浏览器缓存 #

浏览器可能缓存了无效路径，按Ctrl+F5强制刷新，或打开开发者工具（F12）在网络选项卡勾选“禁用缓存”后重新加载。

5. 检查模板片段的引用方式 #

确保Today.html中片段引用位置正确，比如头部片段放在<head>标签内：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="Layouts :: header"></th:block>
</head>
<body>
    <th:block th:replace="Layouts :: sidebar"></th:block>
    <!-- 页面内容 -->
</body>
</html>

6. 排查Spring Security残留影响 #

即使注释了Spring Security依赖，若项目中存在SecurityConfig等配置类，可能仍在拦截静态资源，暂时删除这类配置类再测试。

内容的提问来源于stack exchange，提问作者Ronak Patel