ThymeleafでCSS/Javascriptを読み込む方法

2020/3/23 CSS, HTML, JavaScript

ThymeleafでCSS/Javascriptを読み込む方法をご紹介します。

 

HTMLと同様の記載をしても読み込めるのですが、そのように記載するとThymeleafの場合はControllerのパスに依存してしまうので面倒です。本記事のようにして読み込めばControllerのことを気にする必要はありません。

 

Spring BootではThymeleaf(HTML)は src/main/resources/templatesに配置します。

  • src/main/resources/templates/index.html

 

Spring BootではCSS、Javascriptは src/main/resources/staticに配置します。それぞれ次のように配置します。

  • src/main/resources/static/css/style.css
  • src/main/resources/static/js/script.js

 

読み込む際にはThymeleafに次ぎのように記載します。

css/style.css

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

 

js/script.js

<script src="/js/script.js" th:src="@{/js/sampleJs.js}"></script>

 

参考リンクです。