CODEWITHSUNDEEP
cssspring-bootspring-security
jkfe
jkfe

Reputation: 781

How to add css to a spring boot application?

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.

Upvotes: 0

Views: 3115

Answers (4)

tabrezshaikh13
tabrezshaikh13

Reputation: 28

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

Upvotes: 2

anurag-dhamala
anurag-dhamala

Reputation: 699

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

Upvotes: 0

Abenamor
Abenamor

Reputation: 318

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

Upvotes: 0

dm_tr
dm_tr

Reputation: 4763

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

Upvotes: 1

Related Questions