web-dev-qa-db-ja.com

Thymeleafを使用したSpring Boot-CSSが見つかりません

最初に言うと、私は今しばらくの間解決策を探していましたが、私は今非常に絶望的です。

Spring Bootで実行すると、htmlページからcssファイルにアクセスできません。

html.file

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head lang="en">
        <title th:text='#{Title}'>AntiIntruder</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" media="all" href="../assets/css/style.css" th:href="@{/css/style.css}" />
    </head>
    <body>
...

Application.Java

@SpringBootApplication // adds @Configuration, @EnableAutoConfiguration, @ComponentScan
@EnableWebMvc
public class Application extends WebMvcConfigurerAdapter {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/assets/**").addResourceLocations("classpath:/assets/*");
    }
}

フォルダー構造：

folder structure

cssフォルダーをstaticフォルダーに入れたり、addResourcesHandlersを削除したりして、相対パスなどでcssを参照してみました。これを解決するものは何もないようです。これを解決しようとしたが解決策が見つからなかった場合も知らせてください。私は無視されていません。

javaspring-bootthymeleaf
12
Bato

問題は、@EnableWebMvcファイルのApplication.Javaアノテーションでした。それを削除するとすぐに、CSSはlocalhost:8080/css/style.cssで利用できるようになりましたが、適用されませんでした。これまでのところ、@EnableWebMvcが問題を引き起こしている理由はわかりません。

次に、カスタムエラーページを表示するために実装した/**にマップされたコントローラーを削除しました。

@RequestMapping("/**")
public String notFound() {
    return "errors/404";
}

これも削除した後、CSSを動作させました。 =）

6
Bato

1。カスタムリソースパスの使用

Web構成で

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
  if (!registry.hasMappingForPattern("/assets/**")) {
     registry.addResourceHandler("/assets/**").addResourceLocations("classpath:/assets/");
  }
}

style.cssファイルをこのフォルダに入れます

src/main/resources/assets/css/

その後あなたの意見で

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

。

2。スプリングブートで事前定義されたパスを使用する

Web構成からaddResourceHandlersを削除します

style.cssを次のいずれかのフォルダに入れます

  • src/main/resources/META-INF/resources/assets/css
  • src/main/resources/resources/assets/css/
  • src/main/resources/static/assets/css/
  • src/main/resources/public/assets/css/

そして、ビューで

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

。

注：ここでassetsフォルダを削除できます。それを行う場合は、事前定義されたリソースフォルダーから削除し、ビューth:hrefからも削除します。しかし、あなたが質問でassets/パスを明示的に述べたので、私はそれをそのままにしました。したがって、リソースURLにassets/を含めることはあなたの要件です。

29
Faraj Farook

CSSを静的フォルダーに配置する場合、addResourceHandlersメソッドは必要ありません。

.../static/css/app.css

または、本当にそれらをアセットフォルダーに入れたい場合：

.addResourceLocations("classpath:/assets/") <-- without the * at the end
.../assets/css/app/css

どちらの場合でも、CSSは

th:href="@{/css/app.css}"
3
MystyxMac

Cssフォルダーをresources/staticフォルダー内に配置します

1
L01c

私にとって、thymeleafで機能するためには、スタイルシートへの静的参照を削除する必要がありました。そう

<link rel="stylesheet" type="text/css" media="all" href="../assets/css/style.css" th:href="@{/css/style.css}">

なりました

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

私は何時間もかけてあらゆる種類の構成とファイルパスの名前変更を試みました。理由はわかりませんが、これが、cssとjsをSpring Boot 5でロードする唯一の方法です。

0
Grant Murphy

私のアドバイスは、cssフォルダーの下にstaticフォルダーを（もう一度）配置し、addResourcesHandlersを削除して、絶対パスでcssに到達することです（例：/css/style.css）。

0
Sezin Karli