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

    }

}

文件夹Hierarchy： Folder Hierarchy

Answer 1

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

src/main/resources/static/css

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

然后您将链接更新为：

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

除此之外：您还希望将href路径包含在css中，这样当您在浏览器中打开文件而不加载Spring Boot时，您仍然可以看到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

1 个答案: