CSS 文件找不到 thymeleaf Spring Boot

Posted 2023-02-26

【中文标题】CSS 文件找不到 thymeleaf Spring Boot

【英文标题】：CSS file cannot be located thymeleaf Spring Boot

【发布时间】：2018-03-01 06:37:29

【问题描述】：

我正在设置一个 Spring 引导服务器，但我无法让 Thymeleaf 链接到 CSS。我知道有很多类似的问题，但没有一个能引导我找到答案。

这是我的“home.html”中包含的链接。

<link rel="stylesheet" type="text/css"
      href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />

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

bootstrap.min.css 链接正常，但 main.css 给我一个 404。

Project Structure

这是它在网络下的 Web 控制台中向我显示的内容，此 url 将我带到 Whitelabel 错误

Request URL:http://localhost:8080/styles/main.css

【问题讨论】：

页面的url是什么？是'/'还是下面的东西？

Yannic 是什么意思？我只是在 localhost 端口 8080 上运行它。

导航到 home.html 时浏览器中的 url。它只是 $host.$tld/ 还是在 '/' 之后有什么东西 例如，如果它的 localhost:8080/home 那么你会在 localhost:8080/home/styles/main.css 中查找 css 它在哪里' t

我用来访问此页面的 URL 是 localhost:8080，抱歉，如果我们不是在谈论同一件事。 imgur.com/a/KyilF

hm 那么 ref 看起来是正确的。只是为了确定（因为我注意到你刚刚添加了这个 main.css）。您是否重新启动了 Spring Boot 应用程序？你试过正常的href吗？ thref 应该不是必需的，因为您没有基于属性构建 url

【参考方案1】：

你试过了吗：

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

?

【讨论】：

是的，404 仍然出现。

【参考方案2】：

您的styles 文件夹位于类路径的根目录；它应该被移动到 Spring Boot 实际配置的位置（参见 "serving static content" in the Spring Boot reference documentation）。

在您的情况下，将 src/main/resources/styles 移动到 src/main/resources/static/styles 应该可以解决问题。

【参考方案3】：

尝试在名为 static 的资源下创建一个文件夹和一个名为 css 的子文件夹，然后将您的 css 文件移动到那里，例如：resources/static/css/main.css

然后这样称呼它：

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

【讨论】：

我是否正确地说模板和 css 包都应该移动到这个新的静态文件夹（资源/静态）中。或者它现在只是静态内部的一个 css 包？

只是 CSS，如果你想使用任何 js，你还应该创建 is 文件夹

@gregam3 这取决于它是什么类型的模板。它将成为静态 HTML 模板吗？然后是的，您可以将其移动到静态文件夹。它将是一个合适的 Thymeleaf 模板（或使用另一个模板引擎），那么它应该留在模板文件夹中。

【参考方案4】：

默认情况下应该有一个static 文件夹，并且你的css 内容应该在那里或者public 都在resources 中。运行应用程序时查看 springboot 控制台并查看它从哪里提供资源。下面的例子：

Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
Mapped URL path [/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]

根据上述信息，相应地设置您的资源位置。

【讨论】：

解决了！谢谢。对未来感兴趣的任何人的新文件夹结构。 imgur.com/a/ONSro 并将链接更改为

【参考方案5】：

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer 

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) 
        registry.addResourceHandler(
            "/img/**",
            "/css/**",
            "/libs/**")
            .addResourceLocations(
                    "classpath:/static/img/",
                    "classpath:/static/css/",
                    "classpath:/static/libs/");