Vite React项目中Bootstrap功能不完全生效问题求助

问题描述 #

我是React和Vite的新手，正在开发一个需要使用Bootstrap的Vite React项目。按照Bootstrap官方文档配置后，Bootstrap功能未完全生效：按钮样式正常，但表单、徽章等组件样式不符合预期。

项目结构 #

my-project/
|── node_modules
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

相关代码 #

main.js #

// Import our custom CSS
import "../scss/styles.scss";

// Import all of Bootstrap's JS
import * as bootstrap from "bootstrap";

styles.scss #

// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

index.html #

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
</head>

<body>
    <button type="button" class="btn btn-primary">
        Notifications <span class="badge badge-light">4</span>
    </button>
    <script type="module" src="./js/main.js"></script>
</body>

</html>

vite.config.js #

const path = require("path");

export default {
  root: path.resolve(__dirname, "src"),
  resolve: {
    alias: {
      "~bootstrap": path.resolve(__dirname, "./node_modules/bootstrap"),
    },
  },
  server: {
    port: 8080,
    hot: true,
  },
};

初始package.json #

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "sass": "^1.61.0",
    "vite": "^4.2.1"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.7",
    "bootstrap": "^5.2.3"
  }
}

效果对比 #

• 预期徽章效果：
• 实际徽章效果：

补充说明 #

将Bootstrap版本降级至4.1.3后，表单样式仍未正常显示：

• 实际表单效果：
• 预期表单效果：

降级后的package.json #

{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.7",
    "bootstrap": "^4.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "sass": "^1.61.0",
    "vite": "^4.2.0"
  }
}

解决步骤 #

1. 修正类名版本不匹配问题
   Bootstrap 5和4的类名存在差异，当前依赖与代码类名不匹配：

• 徽章部分：Bootstrap 5中badge-light已废弃，改用bg-light text-dark，代码修改为：

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-light text-dark">4</span>
</button>

• 表单部分：确保表单元素使用对应Bootstrap版本的正确类名，比如Bootstrap 5表单需添加form-control类。

2. 调整样式导入路径
   Vite对~别名解析需正确配置，或直接使用相对路径导入Bootstrap SCSS：
   修改styles.scss：

@import "../node_modules/bootstrap/scss/bootstrap";

若坚持使用别名，需确保vite.config.js路径配置正确，修改后重启项目生效。

3. 规范React项目入口
   Vite React项目默认入口为src/main.jsx，将样式和Bootstrap JS导入移至该文件，并修正index.html中的脚本路径：

<script type="module" src="/src/main.jsx"></script>

4. 修复依赖版本兼容性

• 若使用Bootstrap 4，需卸载@popperjs/core，安装对应版本的popper.js：

npm uninstall @popperjs/core
npm install popper.js@^1.16.1

• 若使用Bootstrap 5，保留@popperjs/core即可，无需降级。

内容的提问来源于stack exchange，提问作者Asir Shahriar Roudra