带有 Thymeleaf 的 Spring Boot - css 未找到

SpringBoot with Thymeleaf - css not found

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

当 运行 通过 Spring 启动时,我无法从 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 文件夹 and/or 删除 addResourcesHandlers,通过相对路径和其他一些东西引用 css。似乎没有什么可以解决这个问题。 如果您尝试解决此问题但没有找到解决方案,请也告诉我,以便我知道我没有被忽略。

我的建议是(再次)将 css 文件夹放在 static 文件夹下,删除 addResourcesHandlers 并使用绝对路径到达 css(例如 /css/style.css)。

如果您将 css 放在静态文件夹中,则不需要 addResourceHandlers 方法。

.../static/css/app.css

或者如果你真的想把它们放在资产文件夹中:

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

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

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

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/

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

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

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

也删除了这个之后,我的 css 开始工作了。 =)

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

对我来说,我必须删除对样式表的静态引用才能使其在 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.

中加载的东西

在我的例子中,问题出在文件读取权限上。 我从另一个项目复制了文件'style.css',浏览器无法读取它。 重新创建 'style.css' 后,一切正常。

首先像这样使用 WebMvcConfigurer 在您的一个配置 class 上实现

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {
//and overide this configuration method like this    
@Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/webjars/**", "/resources/**");
    }
}

所以现在您可以像这样覆盖 HttpSecurity 配置

@EnableWebSecurity
public class WebSecurityConfiguration extends WebSecurityConfigurerAdapter{
 
   @Override
    public void configure(HttpSecurity http) throws Exception {
        http
                .authorizeRequests()
                        .antMatchers("/", "/index").anonymous()
                        .antMatchers("/**/*.*").permitAll()
                .anyRequest().authenticated();
    }
}

this ("/**/*.*") regex text will allow files with anny extension

如果您使用的是像 bootstrap 这样的 webjars 库,请将此配置添加到您的 WebSecurityConfiguration

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}