直接 import 'bootstrap' 会全量打包因主入口文件默认引入全部组件和依赖；应改用 ES 模块按需导入 JS 组件（如 import { Modal } from 'bootstrap'），并用 Sass 源码自定义导入所需 CSS 模块。
为什么直接 import 'bootstrap' 会打包整个 CSS 和 JS？
因为 Bootstrap 的主入口文件（比如 bootstrap/dist/js/bootstrap.bundle.js）默认把所有组件、工具类、依赖（Popper、jQuery 等）全拉进来了；CSS 同理，bootstrap/dist/css/bootstrap.css 包含全部 12 栅格、所有 Utilities、表单重置、动画等。Vue CLI 的 webpack 默认不做 tree-shaking 处理 CSS，JS 部分对 CommonJS 模块支持也有限——结果就是你只用了一个 Modal，却打包了 200KB+ 的无用代码。
如何只引入需要的 JS 组件（比如 Modal 和 Dropdown）？
避开 bootstrap.bundle.js，改用 ES 模块路径，手动导入具体组件：
- 确保已安装
bootstrap和@popperjs/core（Bootstrap 5 不再依赖 jQuery，但依赖 Popper） - 在
main.js或组件内按需导入：import { Modal } from 'bootstrap'; import { Dropdown } from 'bootstrap'; - 注意：不要写
import * as bootstrap from 'bootstrap'，这会触发全量引入 - 如果用 Composition API，在
setup()里直接调用new Modal(...)即可，无需挂载到全局
如何只加载用到的 CSS 工具类（比如只用 text-center 和 mb-3）？
Bootstrap 5 的 CSS 不支持按类名 tree-shaking，但你可以用 Sass 源码 + 自定义构建来剔除不用的部分：
- 安装
bootstrap（含scss/目录）和sass、sass-loader - 新建
src/scss/app.scss，只@import所需模块：@import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/mixins"; // 只引入需要的工具类 @import "~bootstrap/scss/utilities/text"; @import "~bootstrap/scss/utilities/spacers";
- 在
main.js中import './scss/app.scss'，而非bootstrap/dist/css/bootstrap.css - 不推荐用
postcss-purgecss自动删 CSS 类——它容易误删动态生成的类（如:class="`text-${status}`"）
为什么在 Vue 组件里 new Modal() 后点关闭按钮没反应？
常见原因是 DOM 节点还没挂载完成，或者元素被 Vue 的响应式系统包裹导致引用失效：
立即学习“前端免费学习笔记（深入）”；
- 必须确保
Modal初始化时，目标<div id="my-modal">已存在于 DOM 中（不能是v-if切换后才渲染的） - 推荐在
onMounted()（Composition API）或mounted()（Options API）钩子中初始化：const modalEl = document.getElementById('my-modal'); const modal = new Modal(modalEl); - 如果模态框内容由 Vue 渲染，别把
modalEl写死在index.html；应放在组件模板内，并用ref获取真实节点 - 避免在
data或ref里存Modal实例后又在beforeUnmount忘记调用modal.dispose()，否则可能内存泄漏
Bootstrap 的 Sass 变量覆盖、RTL 支持、深色模式切换这些事，得从 _custom.scss 开始配，不是加个 !default 就完事的。真正“优雅”的按需，是 JS 和 CSS 两边都切断默认入口，然后自己搭桥。
