无法将 Spring 中的样式表与 Thymeleaf 链接

Question

所以我已经为此苦苦挣扎了一段时间，但仍然无法弄清楚。

我无法使外部 CSS 文件正常工作，浏览器总是给我一个 200 成功消息，但文件从未加载。

我尝试了很多不同的方法，但目前情况是这样的：

在 HTML 文件中链接：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head> 
    <title>Tourverwalter</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/myStyle.css}" />
</head>

CSS 文件：

body {
    background-color: lightblue;
    text-align: center;
}
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 20%;
    cursor: pointer;
}

header{
    vertical-align: top;
}

.container {
    width: 75%;
    height: 30px;
    padding: 10px;
}

.left {
    width: 40%;
    height:30px;
    float: left;
}

.right {
    margin-left: 60%;
    height: 30px;
}

WebMcvConfig 文件：

package ese4.configuration;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Bean
    public BCryptPasswordEncoder passwordEncoder() {
        BCryptPasswordEncoder bCryptPasswordEncoder = new BCryptPasswordEncoder();
        return bCryptPasswordEncoder;
    }

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

    }

}

和文件夹层次结构： Folder Hierarchy

Answer 1

如果您使用的是 Spring 引导，我建议您将结构更改为：

src/main/resources/static/css

然后您可以删除覆盖的 addResourceHandlers 方法。 Spring Boot will use the static folder to serve your static content.

然后您将 link 更新为：

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

旁白：您还需要包含 css 的 href 路径，这样当您在浏览器中打开文件而不加载 Spring 引导时，您仍然可以看到CSS的效果。这是使用 Thymeleaf 的一个巨大优势，因为您的 UI 人不需要了解 Java 或 Spring 就可以查看格式化页面。

<link rel="stylesheet" type="text/css" href="../static/css/myStyle.css" th:href="@{/css/myStyle.css}" />

最后，你的另一种方法可以简化为：

@Bean
public PasswordEncoder passwordEncoder() {
    return new BCryptPasswordEncoder();
}

无法将 Spring 中的样式表与 Thymeleaf 链接

Trouble linking Stylesheet in Spring with Thymeleaf

css

spring

stylesheet

thymeleaf

spring-boot