How to add css to a spring boot application?

Question

I have a spring boot application. Now I need to add css to it. I added a css file and the link to it in the html file. But for some reason it's not working.

This is how I've done it.

Added csstest.css file below to src/main/resources/static/css.

body {
  background-color: blue;
}

h1 {
  color: red;
  margin-left: 20px;
}

Added the following code to test.html at src/main/resources/templates.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
  <head>
       <meta charset="UTF-8">
       <title></title>
     <link rel="stylesheet" type="text/css" href="css/csstest.css"/>
  </head>
  <body>
       <h1>This text should be styled, but it's not.</h1>
   </body>
</html>

But when I open the html page the css is not being applied. Why?

I've seen a tutorial telling to add a configuration on dispatcher-servlet.xml. But my application is a spring boot app that doesn't have that file. The tutorial was not for a spring boot app (which is my case). The tutorials for spring boot don't tell to do that. So not sure what's the issue.

@dm_tr gotcha! That was the reason it was not working. I removed security and it worked. But the problem is that I do need the security configs. Tried adding the following configs but none of them worked: .antMatchers("/static/css/**").permitAll() AND .antMatchers("/css/**").permitAll() — jkfe, Jan 02 '21 at 01:01
For a full blown example take a look at here - https://github.com/ajkr195/springbootrocks/blob/master/src/main/java/com/spring/boot/rocks/config/ConfigWebSecurity.java — Ajay Kumar, Jan 02 '21 at 02:27

tabrezshaikh13 · Answer 1 · 2021-01-02T18:54:17.567

If you want spring-boot/thymeleaf to detect your CSS file related to your HTML file then you have to add the the resource path using thymeleaf expressions.

In the header tag of your HTML file include this ->

<head>
  <link rel="stylesheet" th:href="@{/css/YourCssFile.css}">
</head>

To make this work you need to place your YourCssFile.css inside the resources folder. The path should look something like this src/main/resources/static/css

Note:- you dont have to give the entire path in the th:href tag in the html file. Mention the filename directly if the css file has been placed directly inside the static folder else if the css file has been placed inside a seperate folder then mention the folder name followed by a forward slash(/) and then the css_file_name.

Example:-

If the css file is placed in src/main/resources/static/css/mystyle.css then the corresponding th:href tag => th:href="@{/css/mystyle.css}"
If the css file is placed in src/main/resources/static/mystyle.css then the corresponding th:href tag => th:href="@{/mystyle.css}"
If the css file is placed in src/main/resources/static/css/homepage/mystyle.css then the corresponding th:href tag => th:href="@{/css/homepage/mystyle.css}"

Hope you get the idea ;)

score 1 · Accepted Answer · answered Jan 02 '21 at 01:05

1

Assuming your @Configuration class extends WebSecurityConfigurerAdapter, override this method. Also, do not forget to use the annotation @EnableWebSecurity on your config class

@Override
public void configure(WebSecurity web) throws Exception {
    web
            .ignoring()
            .antMatchers("/css/**");
}

answered Jan 02 '21 at 01:05

dm_tr

4,265
1
6
30

Your assumption is correct. This is what I have `@Configuration @EnableWebSecurity public class WebConfigSecurity extends WebSecurityConfigurerAdapter`. I added the method you suggested but didn't work. Also tried with static/css/** and resources/static/css/**. – jkfe Jan 02 '21 at 01:47
I removed line by line of my security configuration code and found out that the one that is preventing css to run is @EnableWebMvc. If I remove that annotation css will work fine. After that finding I did some search on the web and found this other post reinforcing that. https://stackoverflow.com/questions/27170772/where-to-put-static-files-such-as-css-in-a-spring-boot-project. – jkfe Jan 02 '21 at 17:04
Well. It depends. I'm not sure if I can afford not having @EnableWebMvc. I'm checking on that now. If that can be removed, the issue is solved. Otherwise it's not. Thanks. – jkfe Jan 02 '21 at 17:28
Why do you need `@EnableWebMvc` ? – dm_tr Jan 02 '21 at 17:34
Not sure. I got it from the tutorial I used to create the security code for my app. So now I'm trying to understand what would be the downside of simply removing that. So far I couldn't find any. Everything kept working fine without it. – jkfe Jan 02 '21 at 17:37
Yeah 'coz it's not necessary – dm_tr Jan 02 '21 at 17:40
really? So, why that exists? There should be a reason. – jkfe Jan 02 '21 at 17:41
Since you are using Spring Security and `@EnableWebSecurity`, it's not necessary to use `@EnableWebMvc` – dm_tr Jan 02 '21 at 17:43
Ok. Thank you. I accepted your answer here as I also did use web.ignoring. Thanks a lot for your help. Very much appreciated. – jkfe Jan 02 '21 at 17:48

Abenamor · Answer 3 · 2021-01-02T01:28:35.360

The CSS will not be applied because they didn't found the csstest.css file under src/main/resources/templates/css.

You must place the test.html file under the src/main/resources/static in order to point to the csstest.css file under src/main/resources/static/css since this section of code in test.html

<link rel="stylesheet" type="text/css" href="css/csstest.css"/>

Worked for me. This is the result when serving test.html file

Thanks

anurag-dhamala · Answer 4 · 2021-01-02T17:09:54.080

0

Since you are using thymeleaf, try th:href instead of href inside your tag.

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

I hope this will solve your problem

edited Jan 02 '21 at 17:09

answered Jan 02 '21 at 03:29

anurag-dhamala

524
3
10

Oh, let me edit my answer. I just saw what was wrong in my answer – anurag-dhamala Jan 02 '21 at 17:08
Check it out. I edited the answer. Try it out – anurag-dhamala Jan 02 '21 at 17:10
1

I tried that. No difference. Don't think the issue is here. Like I said on the other thread the issue got resolved removing @EnableWebMvc. There was no need to change code from what it was in the original code posted above. Thank you. – jkfe Jan 02 '21 at 17:27

How to add css to a spring boot application?

4 Answers4