IntelliJ Spring Boot project can't find my CSS files with Thymeleaf

3
votes

I'm new to Spring Boot and my problem is that I have Spring Boot project and I am intending to view my HTML pages with Thymeleaf but Spring can't resolve my JavaScript and CSS files.

Full picture of my IDE: Full picture of my IDE

Those are my Thymeleaf configurations

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=true

This is my HTML page head:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
       >
<head>
    <title>404 Page</title>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
    <meta name="viewport" content="width=device-width"/>
    <!-- Css Files Start -->
    <link href="/src/main/resources/static/css/style.css" rel="stylesheet" type="text/css" media="screen"/><!-- All css -->
    <link href="/src/main/resources/static/css/bs.css" rel="stylesheet" type="text/css" media="screen"/><!-- Bootstrap Css -->
    <link rel="stylesheet" type="text/css" href="/src/main/resources/static/css/main-slider.css" media="screen"/><!-- Main Slider Css -->
    <!--[if lte IE 10]>
    <link rel="stylesheet" type="text/css" href="/static/css/customIE.css" media="screen"/><![endif]-->
    <link href="/src/main/resources/static/css/font-awesome.css" rel="stylesheet" type="text/css" media="screen"/><!-- Font Awesome Css -->
    <link href="/src/main/resources/static/css/font-awesome-ie7.css" rel="stylesheet" type="text/css" media="screen"/><!-- Font Awesome iE7 Css -->
    <noscript>
        <link rel="stylesheet" type="text/css" href="/static/css/noJS.css"/>
    </noscript>
    <!-- Css Files End -->
</head>
2
springspring-mvcintellij-ideaspring-bootthymeleaf
What are the errors you get if you check the console view? It generally helps to include the errors. In this case, I'd guess that the pathing might be incorrect - but without the actual output you're getting, that's hard to verify. – CmdrSharp

2 Answers

3
votes

You should use relative path to your JavaScript and CSS files:

<link href="../../static/css/style.css" rel="stylesheet" type="text/css" media="screen"/>

or you can use th:href Thymeleaf's tag as well:

<link th:href="@{css/style.css}" href="../../static/css/style.css"
      rel="stylesheet" type="text/css" media="screen"/>
1
votes

I have found that Spring automatically searches for: /resources/.
So what I did was removed all the pre-directories by using find all.

So, in my case what used to be for example: /static/css/style.css & /templates/index.html

became: /css/style.css & /index.html

Now the question remains how does Spring boot know what folder to look in without you defining it: Spring looks at the extension. When spring boot sees .html, it looks for it in a folder called /templates.