问题：

引导4 webjar css不工作与Spring启动胸腺

饶曦之

2023-03-14

我正在使用Thymeleaf制作一个Spring Boot web应用程序。我一直在试验WebJAR，在我的网页上使用JQuery和Bootstrap之类的东西。使用Spring靴2.2。6.发布，并尝试使用Bootstrap Webjar版本4.1。1-1。

我的pom中有几个不同的Webjar，但我意识到没有加载css文件。webjar中的Javascript文件加载良好，但没有应用任何css。当查看WebDeveloper调试器工具时，我可以看到Javascript文件都在那里，但css文件都不存在。

目前，我特别尝试让引导选项卡工作，但显然，没有任何引导样式，任何引导功能都无法工作。

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

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";
  }
}

我有一个web配置类：

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日期选择器设置和工作在同一页，但没有Bootstrap样式。我需要使用bootstrap-datepicker.standalone.css文件，因为bootstrap-datepicker.min.css不工作。

我尝试过但不起作用的事情：

删除WebConfig类
将css链接移动到超文本标记语言文档的主体中
在链接标签中的@{webjars/...}前面放一个/。这在技术上确实适用于Javascript，但它与css链接没有区别。此外，我需要离开领先的/关闭，以便应用程序将使用页面相对链接，否则应用程序不工作时部署到我们的暂存环境
指定th： href内的版本，如：@{/webjars/bootstrap/4.1.1-1/css/bootstrap.min.css}
从主超文本标记语言页面中删除其他内容，直到它几乎只测试Bootstrap选项卡（即只导入Bootstrap css和Javascript文件）
从link元素中删除th：

我所做的一件有效的事情是使用BootstrapCDN，如上所示https://getbootstrap.com/：

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

锺离浩慨

2023-03-14

匿名用户

只是在使用Bootstrap4.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"

引导4 webjar css不工作与Spring启动胸腺

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档