直接@import "bootstrap/scss/bootstrap"会引入180KB冗余CSS，因其全量加载所有组件、全部断点（xs→xxl）及工具类变体（如mt-1至mt-xxl-5），而Sass编译器不检测未用代码，仅拼接导入内容；应改用细粒度导入（如grid、buttons）并前置重定义$enable-*变量禁用未用模块。
为什么直接 @import "bootstrap/scss/bootstrap" 会引入 180KB 冗余 CSS
这行代码等价于全量加载所有组件、全部断点（xs → xxl）、全部工具类变体（mt-1 到 mt-xxl-5、fw-light 到 fw-bolder），哪怕你页面里只用了 btn 和 container。Sass 编译器不会做“未使用 CSS 检测”，它只把所有 @import 的内容拼起来输出。
必须前置导入的三个基础模块及其顺序
跳过任一模块，或顺序错乱，会导致编译失败或样式错乱。常见报错如 SassError: Undefined variable "$grid-columns" 就是因为 variables 在 grid 之前没加载。
-
@import "bootstrap/scss/functions";—— 提供color-contrast()、map-get()等底层函数 -
@import "bootstrap/scss/variables";—— 定义$primary、$grid-columns等，大量组件依赖它 -
@import "bootstrap/scss/mixins";—— 包含button-variant()、media-breakpoint-up()等逻辑封装
这三个必须写在最前面，且严格按此顺序；之后才能导入具体组件。
如何安全地只引入 grid、buttons 和 utilities
先确认你真用到了哪些子模块——比如 utilities 实际可能只需要文本和间距类，而非整套 utilities；grid 也未必需要所有断点。
立即学习“前端免费学习笔记（深入）”；
- 删掉
@import "bootstrap/scss/bootstrap";，它就是体积罪魁 - 改用细粒度路径，例如：
@import "bootstrap/scss/grid";、@import "bootstrap/scss/buttons"; - 若只用部分工具类，不要
@import "bootstrap/scss/utilities";，改用：@import "bootstrap/scss/utilities/text";、@import "bootstrap/scss/utilities/spacers"; - 想精简响应式断点？在
@import "bootstrap/scss/variables";前重定义：$grid-breakpoints: (xs: 0, md: 768px);
禁用未用组件的 $enable-* 变量必须写在 variables 之前
光删 @import 行不一定生效——某些组件（如 tooltip）被其他模块隐式依赖，得靠变量开关真正切断生成链。
- 在
@import "bootstrap/scss/variables";之前加：$enable-tooltip: false !default; - 同理可关：
$enable-modal、$enable-dropdown、$enable-form-validation-icons - 这些变量定义在
node_modules/bootstrap/scss/_variables.scss中，搜$enable-就能看到全部可选项 - 注意：JS 组件也要同步处理（如不引入
bootstrap/js/dist/modal.js），否则 CSS 虽少了，JS 还在打包
最易忽略的是 functions → variables → mixins 这个铁三角顺序，以及 $enable-* 必须出现在 variables 导入前——这两处出错，编译要么挂，要么白忙活。
