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. スクリーンショット 2020-09-28 15.01.19.png

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.

スクリーンショット 2020-09-28 15.09.26.png

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.

スクリーンショット 2020-09-28 15.18.51.png

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.

スクリーンショット 2020-09-28 15.55.12.png

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.

スクリーンショット 2020-09-28 15.01.19.png

Recommended Posts

Common part css is not applied in thymeleaf
[Rails] If CSS is not applied in collection_select, check if class can be specified.
Data is not registered in Rails.
Image is not displayed in production environment
When the project is not displayed in eclipse
Ebean.update () is not executed in the inherited model.
[Error] The app is not displayed in the production environment