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

作者：袖梨 2026-06-14

必须显式导入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";