Bootstrap 5.2.0-beta1 下拉Dropdown组件点击无响应问题排查

• Bootstrap 5 中手风琴（Accordion）组件不依赖第三方库即可运行，但下拉菜单（Dropdown）这类需要浮层定位的组件强依赖 Popper 库。你当前引入的node_modules/bootstrap/dist/js/bootstrap.js是未打包 Popper 依赖的版本，因此会出现手风琴正常、下拉点击无法展开的现象。
• 现有 SCSS 配置存在重复导入问题：提前导入的 functions、variables、maps 等文件，已经包含在后续全量导入的 bootstrap.scss 中，会造成不必要的编译冗余。
• 下拉按钮的初始无障碍属性配置错误：按钮上写死的aria-expanded="true"和默认收起的状态不符，虽不影响核心功能，但不符合无障碍规范。

• 替换 JS 引用文件，使用 Bootstrap 预打包 Popper 依赖的版本，将 HTML 中原 script 标签：

<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>

替换为：

<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>

• 简化 SCSS 配置，移除重复导入的内容，调整变量导入顺序（自定义变量需要在全量导入 Bootstrap 样式前声明才能生效），修正后代码如下：

// 仅需提前导入functions支持map合并操作
@import "./node_modules/bootstrap/scss/functions";

$custom-colors: (
  "tello": #7c9a5c,
  "tello-light": #bcd4ab
);

$theme-colors: map-merge($theme-colors, $custom-colors);

// 导入全量Bootstrap样式
@import "./node_modules/bootstrap/scss/bootstrap.scss";

• 修正下拉按钮初始状态属性，将按钮标签上的aria-expanded="true"改为aria-expanded="false"即可，组件初始化、点击切换时会自动更新该属性值，无需手动维护。

修改完成后重新编译 SCSS，重启本地静态服务，强制刷新浏览器清除缓存后，点击下拉按钮即可正常展开。

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