能，但需同时导入CSS和JS，并确保@popperjs/core在bootstrap之前；否则Modal等组件失效，图标字体404，且须用import { Modal } from 'bootstrap'而非new bootstrap.Modal()。
Bootstrap CSS 能直接用 import 引入吗？
能，但只导入 CSS 文件（比如 bootstrap/dist/css/bootstrap.min.css）时，JS 功能完全不可用——没有 Modal、Dropdown 这些交互组件。Vite 默认不处理 CSS 中的 @import 或字体/图片路径，所以即使 CSS 加载了，图标可能出错、字体加载失败。
- 必须同时引入 CSS 和 JS，且 JS 需要依赖 Popper（Bootstrap 5+ 依赖它做定位），否则控制台报
ReferenceError: Popper is not defined - 推荐从 npm 安装：
npm install bootstrap @popperjs/core，别用 CDN 或下载文件手动放public/，否则 Vite 的 HMR 和 tree-shaking 失效 - 在
main.js或入口文件顶部按顺序写：import 'bootstrap/dist/css/bootstrap.min.css' import '@popperjs/core' import 'bootstrap'
注意：@popperjs/core必须在bootstrap之前，否则初始化失败
为什么 new bootstrap.Modal() 报错说不是构造函数？
因为默认导入的是 CommonJS 版本，而 Vite 原生支持 ESM，直接 import bootstrap from 'bootstrap' 拿到的是一个命名导出对象，不是默认导出类。你不能 new bootstrap.Modal，得用解构或命名导入。
- 正确写法是：
import { Modal } from 'bootstrap' const myModal = new Modal(document.getElementById('myModal')) - 如果项目里大量用
bootstrap.Xxx形式，可以加一层适配：import * as bootstrap from 'bootstrap' // 然后用 bootstrap.Modal
但注意：这样会打包全部组件，增大体积 - 避免在
setup()或onMounted外提前执行初始化，DOM 节点还没挂载就调new Modal()会返回null
Vite + Bootstrap 的图标（SVG）和字体怎么不显示？
Bootstrap 5 的 CSS 里通过 url() 引用了字体文件（如 bootstrap-icons.woff2）和 SVG sprite，Vite 默认不会自动解析 node_modules 里的相对路径资源，导致 404。
- 不用手动复制字体文件到
public/，太容易漏版本或路径错——改用bootstrap-icons包更稳：npm install bootstrap-icons - 然后在 CSS 中显式导入图标样式：
import 'bootstrap-icons/font/bootstrap-icons.css'
（它不依赖外部字体文件，全用 inline SVG） - 如果坚持用 Bootstrap 自带图标，需在
vite.config.js中配置css.preprocessorOptions或改写@import路径，但麻烦且易破，不推荐
用 defineConfig 配置 alias 能简化导入路径吗？
能，但没必要。Bootstrap 的标准路径已经很短（bootstrap/dist/css/bootstrap.min.css），alias 主要解决深层嵌套或重命名问题。强行 alias 反而增加维护成本，尤其团队协作时别人看不懂 @bs/css 指哪。
- 唯一值得 alias 的场景：你频繁用
bootstrap/js/dist/modal.js这类单文件（比如只用 Modal，想避免加载整个bootstrap），可配：resolve: { alias: { '@bs-modal': 'bootstrap/js/dist/modal.js' } }，然后import Modal from '@bs-modal' - 但注意：这种拆包方式绕过了 Bootstrap 内部依赖管理，
Modal仍需要Popper和dom-helpers，Vite 不会自动补，得自己import '@popperjs/core' - 大多数项目直接
import { Modal, Alert } from 'bootstrap'更安全，tree-shaking 也能去掉未用组件
实际项目里最容易被忽略的，是 Popper 的版本对齐——@popperjs/core@2.x 和 bootstrap@5.3+ 兼容，但如果你不小心装了 @popperjs/core@3（比如其他包带进来的），Modal 就会静默失效，控制台也不报错。查这个问题得翻 node_modules/bootstrap/package.json 里的 peerDependencies。
