Search code examples
thymeleafmicronaut

How to load css file in Micronaut using Thymeleaf?


How to load a CSS file in Micronaut using Thymeleaf?

Here is my index.html contents:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link th:href="@{public/style.css}" type="text/css" rel="stylesheet" />
</head>
<body></body>
</html>

Here is application.yml:

router:
  static:
    resources:
      default:
        enabled: true
        mapping: /**
        paths: 'classpath:public'

Image note:

resource directory structure


Solution

  • There are two mistakes in your configuration:

    1. As mentioned by Graeme Rocher, mapping: /** will bind the public folder to root path of your application i.e file will be available at <BASE_URL>/style.css but you are expecting it to be at <BASE_URL>/public/style.css in your HTML file.

    2. You configuration is is not correctly defined. i.e it should start with micronaut instead of router

    Following configuration fixes the issue for you:

    micronaut:
      router:
        static-resources:
          default:
            enabled: true
            mapping: "/public/**"
            paths: "classpath:public"