必须用sass源码按需导入：先@import functions/variables/mixins（顺序不可调），再按需引入grid、buttons等模块及细粒度工具类，禁用未用组件，删除cdn引用，避免purgecss误删动态类。
直接 import 'bootstrap/dist/css/bootstrap.css' 会把全部 200KB+ 的 CSS 打包进来，哪怕你只用了 btn 和 container——浏览器仍得下载、解析、计算所有未使用的样式，拖慢首屏渲染。
必须用 Sass 源码路径手动 @import，不能走 dist 目录
Bootstrap 5 官方提供完整的 scss/ 目录结构，这才是真正可控的按需方案。核心是跳过全量入口 bootstrap/scss/bootstrap，改用最小依赖链：
-
@import "bootstrap/scss/functions";→@import "bootstrap/scss/variables";→@import "bootstrap/scss/mixins";这三者顺序不可调换，否则后续模块（如grid）会报SassError: Undefined variable "$grid-columns" - 之后再按需加：比如用了栅格就加
@import "bootstrap/scss/grid";，用了按钮就加@import "bootstrap/scss/buttons"; - 工具类也拆得很细：
@import "bootstrap/scss/utilities/text";、@import "bootstrap/scss/utilities/spacers";等，只引入模板里真实出现的类名所对应的模块
哪些 Sass 模块能删、哪些不能动
判断依据只有一个：你的 Vue 模板里是否真实出现了对应类名，且没被其他样式覆盖。
- 可删（90% 项目适用）：
tooltip、popover、carousel、offcanvas、toast - 谨慎删：
forms——表单控件依赖reboot中的 border/padding，删前务必检查.form-control渲染是否错乱 - 别删：
reboot和type——它们重置html/body默认样式和基础排版，删了会导致按钮字体异常、列表缩进错乱等隐蔽问题
千万别在 index.html 里留着 CDN 引入
常见错误是 Sass 已精简编译了，但 index.html 里还挂着：<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">。这会造成样式重复、优先级冲突、调试困难。
- 构建工具必须支持递归
@import解析：Vite 默认支持；Vue CLI（webpack）需确认sass-loader版本 ≥ 12，且additionalData或api配置没禁用嵌套导入 - 不要用
purgecss自动删类名——它无法识别:class="`text-${status}`"这类动态类，容易误删；更关键的是，它治标不治本：你本就不该让那些 CSS 进入构建流程
最容易被忽略的点：Sass 模块之间有隐式依赖，比如 buttons 里用到了 variables 里的 $btn-padding-y，而 variables 又依赖 functions 里的 rem() 函数。漏掉前置模块，编译时不会报错，但生成的 CSS 可能缺失关键声明，问题要到运行时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
