How to load css file in Micronaut using Thymeleaf?

Viewed 1118

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

2 Answers

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"

The mapping mapping: /** will mount it under the root. If you want it available under public you probably want to add /public prefix to that mapping

Related