应按需导入 bootstrap sass 源码模块而非全量引入或依赖 purgecss：先导入 functions、variables、mixins，再按需导入 grid、buttons 等模块，顺序不可错；避免误删 reboot 和 type，慎删 forms，禁用 cdn 引入以防样式冲突。
直接 import 'bootstrap/dist/css/bootstrap.css' 会把全部 200KB+ 的 CSS 规则打包进来，哪怕你只用了 btn 和 container —— 浏览器仍得下载、解析、计算所有未使用的样式，拖慢首屏渲染。
为什么不能用 bootstrap.min.css + purgecss？
PostCSS 插件如 purgecss 容易误删动态类名，比如 :class="`text-${status}`" 或服务端渲染生成的类；Bootstrap 自身大量使用 @extend 和嵌套规则，purgecss 无法安全识别依赖链。更关键的是：它治标不治本——你本就不该让这些 CSS 进入构建流程。
必须按 Sass 源码路径导入并手动选模块
Bootstrap 5+ 官方提供完整的 Sass 源码结构，这才是真正可控的按需方案。核心是跳过全量入口 bootstrap/scss/bootstrap，改用最小依赖链：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "bootstrap/scss/mixins";-
@import "bootstrap/scss/grid";（仅当用到row/col） -
@import "bootstrap/scss/buttons";（仅当用到btn相关类） -
@import "bootstrap/scss/utilities/text";、@import "bootstrap/scss/utilities/spacers";等按需添加
顺序不能错：functions → variables → mixins 必须前置，否则 grid 里会报 SassError: Undefined variable "$grid-columns"。
哪些 Sass 模块可以放心删？
判断依据只有一个：你的 HTML 或 Vue 模板里是否真实出现了对应类名，且没被其他样式覆盖。
- 可删（90% 项目适用）：
tooltip、popover、carousel、offcanvas、toast - 谨慎删：
forms—— 表单控件依赖reboot中的border/padding，删前务必检查.form-control渲染是否错乱 - 别删：
reboot和type—— 它们重置html/body默认样式和基础排版，删了会导致按钮字体异常、列表缩进错乱等隐蔽问题
容易被忽略的两个坑
一是构建工具必须支持递归 @import 解析，比如 Vite 默认支持，但某些旧版 postcss-import 配置可能不处理嵌套 @import，导致 grid 里引用的 $grid-columns 找不到；二是 HTML 中不能再留着 CDN 引入的 bootstrap.min.css，常见错误是 Sass 已精简编译了，但 index.html 里还挂着 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">，结果样式重复、权重冲突、体积白减。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
