Bootstrap 5 如何用 Vite 进行开发 Bootstrap 构建工具优缺点

必须显式导入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/ 目录结构里，不翻源码根本绕不开。