删掉 @import "bootstrap/scss/bootstrap" 是第一步，因其强制全量导入30+组件和所有断点工具类；必须按 functions→variables→mixins 顺序手动导入，并仅引入实际使用的组件文件，如 _buttons.scss、_grid.scss，禁用 print 等冗余模块。
直接 @import "bootstrap/scss/bootstrap" 就是体积炸弹——它强制编译全部 30+ 组件、所有断点、整套工具类，哪怕你只用了 .btn 和 .container。真正减体积的唯一路径，是绕过这个入口，手动控制导入链。
为什么删掉 @import "bootstrap/scss/bootstrap" 是第一步
这行代码不是“引入 Bootstrap”，而是“触发全量拼接”：Sass 编译器不分析使用情况，只把 bootstrap.scss 里所有 @import 的文件（包括 tooltip、carousel、print、全部 utilities 变体）一股脑塞进最终 CSS。gzip 后仍常超 160KB。
- 常见错误现象：
.offcanvas、.modal-backdrop出现在生产 CSS 里，但页面 JS 根本没用 offcanvas 插件 - 构建工具（Vite/Webpack）无法对这种纯文本拼接做 tree-shaking
- 即使你项目里一个 tooltip 都没写，
tooltip.scss仍被拉入，且$enable-tooltip: false对它无效——那个变量只关 JS 初始化逻辑
必须按序导入 functions、variables、mixins
这三个不是可选依赖，是 Bootstrap Sass 模块系统的基石。顺序错或漏一个，后续组件编译直接报错，比如 SassError: Undefined variable "$grid-columns"。
-
@use "bootstrap/scss/functions"或@import "bootstrap/scss/functions"—— 提供color-contrast()、map-get()等底层函数 -
@use "bootstrap/scss/variables"—— 定义$primary、$spacers、$grid-breakpoints，几乎所有组件都读它 -
@use "bootstrap/scss/mixins"—— 封装button-variant()、media-breakpoint-up()，grid 和 buttons 都依赖它 - 注意：
@use在较新项目中更安全（避免变量污染），但若用@import，三者必须严格按此顺序，且放在所有组件@import之前
只导入你真正在用的组件模块
Bootstrap 每个组件都有独立文件，路径清晰，不互相耦合。别猜，打开 node_modules/bootstrap/scss/ 目录直接看文件名——_buttons.scss、_grid.scss、_navbar.scss 都可单独引入。
立即学习“前端免费学习笔记（深入）”；
- 高频精简组合示例：
@import "bootstrap/scss/grid"+@import "bootstrap/scss/buttons"+@import "bootstrap/scss/utilities/text"（而非整套utilities） - 务必跳过
@import "bootstrap/scss/print"—— 它默认被bootstrap.scss引入，含大量媒体查询，不做 PDF 导出时纯属冗余 - 工具类要更细粒度：
@import "bootstrap/scss/utilities/spacers"比@import "bootstrap/scss/utilities"少生成 70% 类名 - 禁用方式不是靠变量开关，是物理删除
@import行：删掉@import "bootstrap/scss/modal"，.modal类就永远不会出现在 CSS 里
构建工具配合与容易被忽略的陷阱
光改 SCSS 不够，构建链路必须对齐。否则你手动精简了，打包时又被其他地方悄悄拉回全量。
- Vite 用户需确认
cssCodeSplit: true开启，否则所有 SCSS 入口仍被打包进一个 CSS 文件 - Webpack 用户检查
splitChunks.chunks: 'all'，并确保 JS 入口只import对应的 SCSS 入口（如admin.tsx只import './scss/admin.scss'） - 容易被忽略的体积黑洞：
$grid-breakpoints默认含 xs→xxl 5 个断点，如果你只用 md 和 lg，重定义为$grid-breakpoints: (md: 768px, lg: 992px)可砍掉近 40% grid 相关 CSS - 最后一步验证：构建后打开最终 CSS 文件，搜
.tooltip、.carousel、@media print—— 如果存在，说明某处仍有隐式引用或@import没清理干净
