带有 Thymeleaf 的 Spring Boot - 未找到 css

Posted 2023-02-26

技术标签:

【中文标题】带有 Thymeleaf 的 Spring Boot - 未找到 css【英文标题】：SpringBoot with Thymeleaf - css not found 【发布时间】：2015-06-16 05:36:50 【问题描述】：

首先要说的是，我一直在寻找解决方案，现在我很绝望。

当 Spring Boot 运行时，我无法从 html 页面访问 css 文件。

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/*");

文件夹结构：

我尝试将css 文件夹放入static 文件夹和/或删除addResourcesHandlers，通过相对路径和其他一些东西引用css。似乎没有什么可以解决这个问题。如果您尝试解决此问题但没有找到解决方案，请告诉我，以便我知道，我不会被忽视。

【问题讨论】：

每次更改后我都会重新构建代码，并在 Firefox 中使用 Ctrl+F5 刷新页面。我也尝试过使用 Chrome。我使用 gradle bootRun 运行 webapp 如果我直接在浏览器中打开html文件，页面的css文件格式正确。如前所述删除@EnableWebMvc 注释。另见***.com/a/37205978/14691363 【参考方案1】：

1.使用自定义资源路径

在您的网络配置中

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

将您的style.css 文件放入此文件夹中

src/main/resources/assets/css/

在你看来之后

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

2。在 Spring Boot 中使用预定义路径

从您的网络配置中删除 addResourceHandlers

将style.css 放入以下任一文件夹中

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/

在视图中

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

注意：您可以在此处删除 assets 文件夹。如果您想这样做，请将其从预定义的资源文件夹以及视图th:href 中删除。但我保持原样，因为您在问题中明确提到了assets/ 路径。所以我相信您的资源 URL 中必须有 assets/。

【讨论】：

感谢您的精彩解释！我给你一个赞成票。不幸的是，这也不起作用。我还尝试将 css 文件移动到不同的位置，也在生成的 war 文件中。我已经尝试将应用程序部署到标准 tomcat ......我不知道......这现在应该可以工作了。还有其他信息可以提供给您吗？发布更多代码会有所帮助吗？如果是，是哪一个？请参阅spring.io/blog/2013/12/19/… 了解更多详细信息，并在上面的示例中注意assets 是从应用程序根目录提供的（即public、static 等不是路径的一部分）。将assets 留在层次结构中可以更轻松地配置安全性：http.authorizeRequests().antMatchers("/assets/**").permitAll()【参考方案2】：

问题在于Application.java 文件中的@EnableWebMvc 注释。一旦我删除了那个，css 就开始在localhost:8080/css/style.css 上可用，但没有被应用。到目前为止，我还没有找到 @EnableWebMvc 导致问题的原因。

然后我删除了一个映射到/** 的控制器，我已经实现了该控制器以显示自定义错误页面。

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

在删除这个之后，我的 css 就可以正常工作了。 =)

【讨论】：

【参考方案3】：

如果你把你的 css 放在 static 文件夹中，你不需要 addResourceHandlers 方法。

.../static/css/app.css

或者如果你真的想把它们放在 assets 文件夹中：

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

在这两种情况下，css 都应该可以通过

th:href="@/css/app.css"

【讨论】：

我删除了addResourceHandlers 并将css 文件夹放入static 文件夹中，但它仍然不起作用。然后我把它放回assets，把addResourceHandlers放回去，但没有*，这也无济于事。除非我从我的 WebConfig 类中删除 EnableWebMvc，否则我无法让它工作。我删除了/static/ 文件路径的.css 部分，它开始正常工作！这是否意味着静态资源的相对根路径不应包含/static/？【参考方案4】：

将您的 css 文件夹放入 resources/static 文件夹

【讨论】：

【参考方案5】：

就我而言，问题在于文件读取权限。我从另一个项目中复制了文件“style.css”，浏览器无法读取它。重新创建“style.css”后，一切正常。

【讨论】：

【参考方案6】：

我的建议是（再次）将 css 文件夹放在 static 文件夹下，删除 addResourcesHandlers 并使用绝对路径（例如 /css/style.css）访问 css。

【讨论】：

我又做了一次，但结果是一样的。 css 在 resources/static/css/style.css 中，标签是 <link rel="stylesheet" type="text/css" media="all" href="/css/style.css"/> 在浏览器的控制台中，我可以看到它正在寻找 http://localhost:8080/css/style.css 中的 css 文件 @Bato ：我看到了同样的问题。有什么建议你是如何解决这些年龄的？【参考方案7】：

对我来说，我必须删除对样式表的静态引用才能使其在 thymeleaf 中工作。所以

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

成为

<link rel="stylesheet" th:href="@/css/bootstrap.css">

我花了几个小时尝试各种配置和文件路径重命名。不知道为什么，但这是让我的 css 和 js 在 Spring Boot 5 中加载的唯一原因。

【讨论】：

以上是关于带有 Thymeleaf 的 Spring Boot - 未找到 css的主要内容，如果未能解决你的问题，请参考以下文章

Spring boot Thymeleaf 配置

spring boot中使用thymeleaf

datetimepicker 值未绑定到带有 thymeleaf 的属性 spring

Spring Boot、Spring Security 和 Thymeleaf：将 CsrfFilter 应用到带有表单的网站

带有 Thymeleaf 3 Beta 的 Spring Boot

Spring Boot / Thymeleaf / Hibernate：带有 Java 注解的 Sessionfactory Bean