如何将基于JSP、JQuery的Spring MVC项目从Bootstrap 3迁移到4

一、核心背景说明 #

Bootstrap 4 已放弃对 LESS 的支持，全面改用 SCSS 作为预处理器，你控制台中出现的 .less 文件引用是 Bootstrap 3 时期的遗留代码，需要先清理再集成 SCSS 实现自定义样式。

二、具体操作步骤 #

1. 清理旧 LESS 引用 #

找到项目中所有引入 .less 文件的位置（比如 JSP 页面的 <link> 标签、旧编译脚本），直接删除这些引用，避免与 Bootstrap 4 的 SCSS 体系冲突。

2. 引入 Bootstrap 4 SCSS 源文件 #

• 下载 Bootstrap 4 完整源码包（不要仅下载编译好的 css/js），解压后取出 scss 目录，将其放入 Spring MVC 项目的静态资源目录，比如 Maven 结构的 src/main/resources/static/scss/，或 WebContent 对应的静态资源文件夹。

3. 创建自定义 SCSS 文件 #

不要直接修改 Bootstrap 官方 SCSS 文件，通过自定义文件覆盖变量或添加样式：

• 在 scss 目录下新建 custom.scss，示例内容如下：

// 导入Bootstrap核心变量文件，用于覆盖默认值
@import "bootstrap/variables";

// 自定义变量，例如修改主题色、背景色
$primary: #2c3e50;
$body-bg: #ecf0f1;

// 导入完整Bootstrap SCSS
@import "bootstrap";

// 在这里添加专属自定义样式
.custom-card {
  margin: 1.5rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

4. 编译 SCSS 为 CSS #

Spring MVC 本身不支持 SCSS 编译，需通过以下方式处理：

• Maven/Gradle 自动编译：在 pom.xml 中配置 sass-maven-plugin，或在 Gradle 中添加 SCSS 编译插件，让构建过程自动将 SCSS 编译为 CSS，输出到项目的 CSS 资源目录（如 target/classes/static/css/）。
• 本地工具手动编译：安装 Node.js 后，通过 npm install -g sass 安装命令行工具，执行 sass 你的SCSS路径/custom.scss 输出CSS路径/custom.css 完成编译，修改 SCSS 后重新执行该命令即可。

5. 替换项目 CSS 引用 #

将原页面中引入 bootstrap.css 的代码，替换为编译后的自定义 CSS 文件：

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/custom.css">

6. 确认 JS 依赖顺序 #

Bootstrap 4 的 JS 依赖顺序必须严格遵循：先引入 jQuery，再引入 Popper.js，最后引入 Bootstrap.js：

<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>

三、额外注意点 #

• Bootstrap 4 与 3 存在大量类名变更（如 btn-default 改为 btn-secondary、navbar-default 改为 navbar-light/navbar-dark），这是布局变化的核心原因，需逐步替换旧类名。
• 若项目有旧的 LESS 自定义样式，需将其转换为 SCSS 语法（比如变量从 @var 改为 $var）后再加入自定义 SCSS 文件。

内容的提问来源于stack exchange，提问作者slearner