必须显式导入CSS、@popperjs/core（在bootstrap前）和bootstrap，并用import { Modal } from 'bootstrap'解构调用；否则Modal等组件报错或无响应。
Bootstrap 5 在 Vite 中不是“开箱即用”的，必须显式处理 CSS、JS 和依赖顺序，否则常见组件（如 Modal、Dropdown）会直接报错或无响应。
import 'bootstrap' 报 ReferenceError: Popper is not defined
这是最常踩的坑。Bootstrap 5 的 JS 组件（除 Toast 外）全部依赖 @popperjs/core 做定位计算，而 Vite 默认不自动解析其导出，也不会按需注入全局 Popper。
- 必须手动安装并确保导入顺序：
npm install bootstrap @popperjs/core
- 在入口文件（如
main.ts）中严格按此顺序写：import 'bootstrap/dist/css/bootstrap.min.css'<br>import '@popperjs/core'<br>import 'bootstrap'
- 错误写法（哪怕只调换后两行）会导致
Modal初始化失败、Dropdown不展开、控制台持续报错
vite.config.js 里要不要配 alias 指向 bootstrap？
没必要，反而容易误导。
- Bootstrap 官方路径已足够清晰：
bootstrap/dist/css/bootstrap.min.css、bootstrap/js/dist/modal.js - 若强行 alias 成
@bs/css或bootstrap5，团队成员读代码时无法直觉判断来源，排查样式覆盖或 tree-shaking 问题时多一层跳转 - 唯一值得加的 alias 是
@（指向src），用于业务代码，和 Bootstrap 无关
按需引入 Modal 等单个组件，为什么 new Modal(...) 仍无效？
因为 Vite 解析的是 ESM，而 bootstrap 包默认导出是命名导出对象，不是默认导出类。
- 正确写法是解构导入：
import { Modal } from 'bootstrap'<br>const myModal = new Modal(document.getElementById('myModal')) - 错误写法（CommonJS 风格残留）：
import bootstrap from 'bootstrap'<br>const myModal = new bootstrap.Modal(...)
这在开发时可能“碰巧”能跑，但构建后大概率失效，且破坏 tree-shaking
Vite 构建 Bootstrap 的实际体积和性能表现
Vite 本身不打包 CSS，而是靠插件或原生 import 注入；但 Bootstrap 的 CSS 是全量引入的，即使你只用 Button 和 Card，bootstrap.min.css 仍会打进主包。
- 若追求极致体积，必须放弃全局 CSS 引入，改用 Sass 源码 + 自定义
@import链：@import "bootstrap/scss/functions";<br>@import "bootstrap/scss/variables";<br>@import "bootstrap/scss/mixins";<br>@import "bootstrap/scss/buttons";<br>@import "bootstrap/scss/cards";
- 同时关闭
css.modules的 scope 行为（否则变量无法跨文件访问），并在vite.config.js的css.preprocessorOptions.scss.additionalData中统一注入基础 SCSS 依赖
真正难的不是“能不能配”，而是“配完之后，哪部分还能被摇掉、哪部分必须留着、哪部分改了会影响第三方组件”。这些细节藏在 bootstrap/scss/ 目录结构里，不翻源码根本绕不开。
