0

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.

Improve this question
4
  • Are you using spring security ? Commented Jan 1, 2021 at 23:56
  • @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() Commented Jan 2, 2021 at 1:01
  • Check my answer below Commented Jan 2, 2021 at 1:05
  • For a full blown example take a look at here - github.com/ajkr195/springbootrocks/blob/master/src/main/java/… Commented Jan 2, 2021 at 2:27

4 Answers 4

Reset to default
2

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:-

  1. 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}"

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

  3. 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 ;)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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/**");
}
Improve this answer

9 Comments

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/**.
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. stackoverflow.com/questions/27170772/….
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.
Why do you need @EnableWebMvc ?
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.
|
0

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 enter image description here

Thanks

Improve this answer

Comments

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

Improve this answer

3 Comments

Oh, let me edit my answer. I just saw what was wrong in my answer
Check it out. I edited the answer. Try it out
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 <link> code from what it was in the original code posted above. Thank you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.