Common part css is not applied in thymeleaf
Introduction
On the site using the thymeleaf layout dialect function, there was a case where the common part css was not applied, so I will introduce the countermeasures.
environment
OS: macOS Catalina 10.15.6 JDK:14.0.1 Spring Boot 2.3.3 jquery 3.3.1-1 bootstrap 4.2.1
Error summary
When css is successfully applied to the common part, a dark green header, logo and search window will be displayed at the top of the screen as shown below.
This time, when I created, stored and executed the html file in a hierarchy deeper than other pages, it became as follows.
Since the navigation bar, logo, and search window included in the common part are displayed, it seems that the thymeleaf layout dialect function itself is applied, but the css of the common part is not applied.
Hierarchy of files used
Pages to which css is not applied this time are created with html in the red frame. Since the hierarchy is different from the page to which css is applied, I assumed that it was caused by an incorrect path to css.
Check the css path applied in the developer tools
Check the path used by this page to access css in the developer tools.
Although it says "css / template.css" on the html file, it is actually "http: // localhost: 8080 / mypage / css / template.css" And trying to access a directory that does not contain css files.
Corrected the contents of the common part "template.html"
In the head element of "template.html" which is the html of the common part,
Add the following under <link th: href =" @ {css / template.css} "rel =" stylesheet "> </ link>.
<link th:href="@{../css/template.css}" rel="stylesheet"></link>
As explained in "Hierarchy of files used", "deleteUser.html" is located one level below the html to which css is applied, so "th: href" is ../ (one level up). ) Is added so that css can be accessed from" deleteUser.html ".
template.html
<head>
<meta charset="UTF-8"></meta>
<link th:href="@{/webjars/bootstrap/4.2.1/css/bootstrap.min.css}" rel="stylesheet"></link>
<script th:src="@{/webjars/jquery/3.3.1-1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.2.1/js/bootstrap.min.js}"></script>
<link th:href="@{css/template.css}" rel="stylesheet"></link>
<link th:href="@{../css/template.css}" rel="stylesheet"></link>
<script src="https://kit.fontawesome.com/665f18a48e.js" crossorigin="anonymous"></script>
<title>template</title>
</head>
Save and run
css has been applied.
Recommended Posts