Laravel 7 中安装 Bootstrap 5 失败，请求技术帮助

1. 清理冲突依赖 #

Bootstrap 5 已完全移除 jQuery 依赖，且仅需要 @popperjs/core（你已安装），先卸载多余的旧依赖：

npm uninstall jquery popper.js

2. 修正 resources/js/bootstrap.js #

移除 jQuery 相关代码避免冲突，同时简化 Bootstrap 引入逻辑：

try {
    window.Popper = require('@popperjs/core');
    window.bootstrap = require('bootstrap');
} catch (e) {}

注意：不需要重复调用 require('bootstrap')，一次赋值即可全局挂载 Bootstrap 对象。

3. 修正组件 HTML 结构 #

Bootstrap 5 对组件的 data 属性做了统一修改，所有原 data-* 属性需改为 data-bs-*，比如下拉框：

• 错误（Bootstrap 4 写法）：data-toggle="dropdown"
• 正确（Bootstrap 5 写法）：data-bs-toggle="dropdown"

示例正确的下拉框结构：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuBtn" data-bs-toggle="dropdown" aria-expanded="false">
    下拉菜单
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuBtn">
    <li><a class="dropdown-item" href="#">选项1</a></li>
    <li><a class="dropdown-item" href="#">选项2</a></li>
  </ul>
</div>

4. 确认脚本引入位置 #

确保 app.js 在页面底部（</body> 前）引入，保证 DOM 加载完成后再初始化 Bootstrap 组件：

<body>
    <!-- 页面内容 -->
    <script src="{{ asset('js/app.js') }}"></script>
</body>

若必须在头部引入，需添加 defer 属性：

<script src="{{ asset('js/app.js') }}" defer></script>

5. 重新编译资源 #

执行以下命令完成依赖安装和编译：

npm install && npm run dev

额外检查点 #

• 确认 resources/sass/app.scss 中 Bootstrap 引入路径正确：@import '~bootstrap/scss/bootstrap';
• 若自定义了 variables.scss，检查是否有与 Bootstrap 5 变量名冲突的定义（核心变量如 $primary 仍兼容，但部分小众变量前缀有调整）

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