CSS file cannot be located thymeleaf Spring Boot

Question

I'm setting up a Spring boot server and I just can't get Thymeleaf to link to the CSS. I know there are a number of similar questions but none of them lead me to an answer.

This is the link included in my "home.html".

<link rel="stylesheet" type="text/css"
      href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />

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

bootstrap.min.css links fine but main.css gives me a 404.

Project Structure

This is what it shows me in the web console under networks, this url takes me to a Whitelabel error

Request URL:http://localhost:8080/styles/main.css

What do you mean Yannic? I'm just running it on localhost port 8080. — gregam3
– gregam3, Commented Sep 20, 2017 at 9:29
the url in your browser if you navigate to home.html. is it just $host.$tld/ or is there something after the '/' For Example if its localhost:8080/home then you would look for the css in localhost:8080/home/styles/main.css where it isn't — Yannic Bürgmann
– Yannic Bürgmann, Commented Sep 20, 2017 at 9:31
The URL I am using to access this page is localhost:8080, sorry if we're not talking about the same thing. imgur.com/a/KyilF — gregam3
– gregam3, Commented Sep 20, 2017 at 9:32
hm then the ref looks correct. Just to be sure (since i noticed that you just added this main.css). Did you reboot the spring boot application? And have you tried normal href? thref should not be necessary since you don't build a url based on properties — Yannic Bürgmann
– Yannic Bürgmann, Commented Sep 20, 2017 at 9:34

zulqarnain · Accepted Answer · 2017-09-20 10:11:44Z

1

By default there should be a static folder and your css content should be there or public all inside resources. Look at the springboot console when you run the app and look where it's serving resources from. Example below:

Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]
Mapped URL path [/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler]

Based on the info above set your resource location accordingly.

edited Sep 20, 2017 at 10:11

answered Sep 20, 2017 at 10:02

zulqarnain

1,7452 gold badges16 silver badges35 bronze badges

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

1 Comment

gregam3 Over a year ago

Solved! Thanks. New folder structure for anyone interested in future. imgur.com/a/ONSro and changed the link to <link rel="stylesheet" type="text/css" href="../css/main.css" />

juanlumn · Accepted Answer · 2017-09-20 10:01:48Z

1

Try creating a folder under resources called static and a subfolder called css and move your css files there, something like: resources/static/css/main.css

Then call it like:

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

answered Sep 20, 2017 at 10:01

juanlumn

7,3032 gold badges34 silver badges42 bronze badges

3 Comments

gregam3 Over a year ago

Am I right in saying that the templates and css packages should both be moved inside of this new static folder (resources/static). Or would it just be a css package inside static for now?

juanlumn Over a year ago

Just the CSS and in case you want to use any js you should also create the is folder

Dimitri Mestdagh Over a year ago

@gregam3 it depends on what kind of template it is. Is it going to be a static HTML template? Then yes, you can move it to the static folder. Is it going to be a proper Thymeleaf template (or using another template engine), then it should stay in the templates folder.

Paweł K. · Accepted Answer · 2019-07-03 04:33:26Z

1

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(
            "/img/**",
            "/css/**",
            "/libs/**")
            .addResourceLocations(
                    "classpath:/static/img/",
                    "classpath:/static/css/",
                    "classpath:/static/libs/");
    }

}

answered Jul 3, 2019 at 4:33

Paweł K.

111 bronze badge

Comments

user5770200 · Accepted Answer · 2017-09-20 09:22:08Z

0

Have you tried:

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

?

answered Sep 20, 2017 at 9:22

user5770200

1 Comment

gregam3 Over a year ago

Yes, the 404 still occurs.

Brian Clozel · Accepted Answer · 2017-09-20 09:57:49Z

0

Your styles folder is located at the root of the classpath; it should be moved to a location that's actually configured by Spring Boot (see "serving static content" in the Spring Boot reference documentation).

In your case, moving src/main/resources/styles to src/main/resources/static/styles should do the trick.

answered Sep 20, 2017 at 9:57

Brian Clozel

59.7k15 gold badges180 silver badges184 bronze badges

Collectives™ on Stack Overflow

CSS file cannot be located thymeleaf Spring Boot

5 Answers 5

1 Comment

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related