SpringBoot with Thymeleaf - css not found
Question
First to say is that I've been searching for a solution for a while now and I'm quite desperate now.
I cannot get the css file to be accessible from html page when run by Spring Boot.
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/*");
}
}
folder structure:
I've tried putting the css folder into a static folder and/or removing the addResourcesHandlers, referencing to the css by relative path and some other things. Nothing seems to resolve this. Please, let me know also if you tried to solve this but did not find a solution, so that I know, that I'm not ignored.
9 answers
solution1
29 2015-04-10 19:04:16
1. Using Custom Resource Path
In your Web Config
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
if (!registry.hasMappingForPattern("/assets/**")) {
registry.addResourceHandler("/assets/**").addResourceLocations("classpath:/assets/");
}
}
Put your style.css file inside this folder
src/main/resources/assets/css/
After that in your views
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/style.css}" />
.
2. Using predefined paths in spring boot
Remove addResourceHandlers from your web config
Put the style.css inside any of the following folders
-
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/
And in the view
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/style.css}" />
.
NOTE: You can remove the assets folder here. If you want to do it, remove it from the predefined resource folder and also from the view th:href . But i kept it as it is because, you explicitly mentioned the assets/ path in your question. So I belive it's your requirement to have assets/ in your resource URL.
solution2
5 ACCPTED 2015-04-12 17:12:37
The problem was the @EnableWebMvc annotation in the Application.java file. As soon as I removed that one, the css started to be available at localhost:8080/css/style.css but was not applied. So far I haven't found the reason why the @EnableWebMvc was causing the problem.
Then I removed a controller mapped to /** that I had implemented in order to display custom error page.
@RequestMapping("/**")
public String notFound() {
return "errors/404";
}
After removing also this one, I've got my css working. =)
solution3
3 2015-04-10 13:33:00
If you put your css in the static folder, you dont need the addResourceHandlers method.
.../static/css/app.css
Or if you really want to put them in the assets folder:
.addResourceLocations("classpath:/assets/") <-- without the * at the end
.../assets/css/app/css
in both cases the css should be available through
th:href="@{/css/app.css}"
solution4
0 2015-04-10 13:25:19
我的建议是将（再次） css文件夹放在static文件夹下，删除addResourcesHandlers并使用绝对路径到达css（例如/css/style.css ）。
solution5
0 2016-08-03 10:34:34
将您的css文件夹放在resources / static文件夹中
solution6
0 2019-07-31 15:33:00
For me I had to remove the static reference to the stylesheet for it to work in thymeleaf. So
<link rel="stylesheet" type="text/css" media="all" href="../assets/css/style.css" th:href="@{/css/style.css}">
Became
<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
I spent hours trying all sorts of configurations and file path renaming. Don't know why but this is the only thing that got my css and js to load in Spring Boot 5.
solution7
0 2021-11-24 18:49:59
In my case the problem was in file read permissions. I copied the file 'style.css' from another project, and browser could not read it. After re-creating 'style.css', everything worked fine.
solution8
0 2022-03-11 12:20:16
first implements on one of your configuration class with WebMvcConfigurer like this
@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/**");
}
}
so now you can overide your HttpSecurity configuration like this
@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
and if your are using an webjars libraries like bootstrap add this config to your WebSecurityConfiguration
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
solution9
0 2022-11-17 09:33:22
If this topic still relevant in 2022. I have had a similar problem and i solved it like this:
This link in /templates/file.html
<link rel="stylesheet" type="text/css" media="all" ref="../static/css/styles.css">
and i have added application.properties
spring.mvc.static-path-pattern=/static/**
my css path is
src/main/resources/static/css/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.