Bootstrap 4 webjar css 不适用于 Spring Boot + Thymeleaf答案

【问题标题】：Bootstrap 4 webjar css not working with Spring Boot + ThymeleafBootstrap 4 webjar css 不适用于 Spring Boot + Thymeleaf
【发布时间】：2020-08-15 12:25:15
【问题描述】：

我正在使用 Thymeleaf 制作一个 Spring Boot Web 应用程序。我一直在尝试使用 Webjars 在我的网页上使用 JQuery 和 Bootstrap 之类的东西。使用 Spring Boot 2.2.6.RELEASE，并尝试使用 Bootstrap Webjar 版本 4.1.1-1。

我的 pom 中有几个不同的 webjar，但我意识到没有一个 css 文件正在加载。来自 webjars 的 Javascript 文件加载正常，但没有应用任何 css。在查看 web 开发调试器工具时，我可以看到 Javascript 文件都在那里，但没有 css 文件。

目前，我正在特别尝试让 Bootstrap 选项卡工作，但显然，如果没有任何 Bootstrap 样式，任何 Bootstrap 功能都将无法工作。

这基本上就是我的控制器的样子：

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class MyController {

  @RequestMapping(value = "/stats", method = {RequestMethod.GET, RequestMethod.POST})
  public String stats(
      Model model) {

    // some code adding simple attributes to the model

    return "stats";
  }
}

我有这个网络配置类：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry
        .addResourceHandler("/webjars/**")
        .addResourceLocations("classpath:/META-INF/resources/webjars/")
        .resourceChain(false);
  }
}

我的 pom 示例：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.6.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <!-- artifact info... -->

  <properties>
    <java.version>1.8</java.version>
  </properties>

  <dependencies>

    <!-- some other dependencies -->

    <!-- Webjars -->
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap</artifactId>
      <version>4.4.1-1</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap-datepicker</artifactId>
      <version>1.7.1</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>jquery</artifactId>
      <version>3.5.0</version>
    </dependency>

    <dependency>
      <groupId>org.webjars.npm</groupId>
      <artifactId>popper.js</artifactId>
      <version>1.16.1</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>font-awesome</artifactId>
      <version>5.13.0</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>webjars-locator</artifactId>
      <version>0.40</version>
    </dependency>

    <!-- Spring -->

    <!-- some other Spring deps... -->

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-configuration-processor</artifactId>
      <optional>true</optional>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>
</project>

这是我的 html 页面 (stats.html) 的示例：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <title>My Web App</title>

  <link th:rel="stylesheet" th:href="@{webjars/bootstrap/css/bootstrap.min.css}" type="text.css"/>
  <!--<link th:rel="stylesheet" th:href="@{webjars/bootstrap-datepicker/css/bootstrap-datepicker.min.css}" type="text/css"/>-->
  <link th:rel="stylesheet" th:href="@{webjars/bootstrap-datepicker/css/bootstrap-datepicker.standalone.css}" type="text/css"/>
  <link th:rel="stylesheet" th:href="@{webjars/font-awesome/css/all.css} " type="text/css"/>
  <link href="../static/css/custom-styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
  <script th:src="@{webjars/jquery/jquery.min.js}" type="text/javascript"></script>
  <script th:src="@{webjars/popper.js/1.14.3/umd/popper.min.js}" type="text/javascript"></script>
  <script th:src="@{webjars/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
  <script th:src="@{webjars/bootstrap-datepicker/js/bootstrap-datepicker.min.js}" type="text/javascript"></script>

  <!-- Other simple web content... -->

  <!-- Example straight from Bootstrap 4 documentation https://getbootstrap.com/docs/4.4/components/navs/#tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
  </ul>

  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
  </div>

</body>

选项卡标题（或导航项）只是显示为正常的无序列表，所有实际选项卡的内容都显示在其下方。

正如我所说，据我所知，脚本文件正在正确加载。我有一个 Bootstrap datepicker 设置并在同一页面上工作，但没有 Bootstrap 样式。我需要使用bootstrap-datepicker.standalone.css 文件，因为bootstrap-datepicker.min.css 不起作用。

我尝试过的方法不起作用：

删除WebConfig 类
将 css 链接移动到 HTML 文档的正文中
在链接标签中的@{webjars/...} 前面放置一个“/”。这在技术上确实适用于 Javascript 的东西，但它与 css 链接没有区别。此外，我需要关闭前导“/”，以便应用程序使用页面相关链接，否则应用程序在部署到我们的暂存环境时无法运行
在th:href 中指定版本，如下所示：@{/webjars/bootstrap/4.1.1-1/css/bootstrap.min.css}
从主 HTML 页面中删除其他内容，直到它几乎只测试 Bootstrap 选项卡（即只导入 Bootstrap css 和 Javascript 文件）
从链接元素中删除th:

我所做的一件事确实工作是使用 BootstrapCDN，如在 https://getbootstrap.com/ 上看到的：<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

如果我使用它而不是我在上面的 HTML 中实际拥有的链接，则会应用样式并且一切正常（据我所知）。但是，我想知道为什么我不能让 webjar 工作，以及是否有其他人遇到过这个问题。或者也许我在做一些我太近看不到的明显错误的事情？

【问题讨论】：

标签： html css spring-boot thymeleaf webjars

【解决方案1】：

使用 Bootstrap 4.5.0 时遇到了相同（或非常相似）的问题，以下对我有用：

在 pom 中我有：

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.40</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.5.0</version>
</dependency>

我没有 @Configuration 类 - 当我删除它时它实际上开始工作了。

我的 html 开头是：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" type="text/css"/>
    <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
</head>

希望这会有所帮助。

编辑：刚刚再次查看了您的代码。你有type="text.css" 而不是type="text/css"

乙。

【讨论】：