直接@import"bootstrap/scss/bootstrap"会白占180KB，因其等价于全量加载所有组件、断点及工具类变体；必须前置导入functions、variables、mixins三模块且顺序不可颠倒；通过$enable-*变量禁用非必要组件、精简$grid-breakpoints和$utilities可大幅减小体积。
为什么直接 @import "bootstrap/scss/bootstrap" 会白占 180KB
因为这行代码等价于全量加载所有组件、所有断点、所有工具类变体（mt-1 到 mt-xl-5、fw-light 到 fw-bolder），哪怕你页面里只用了 btn btn-primary 和 container。Sass 编译器不会自动剔除未用的 CSS 规则，它只管把 @import 进来的所有内容拼一起输出。
必须先导入的三个基础模块
跳过它们会导致编译报错或样式错乱，顺序不能颠倒：
-
@import "bootstrap/scss/functions";—— 所有map-get、color-contrast等函数依赖它 -
@import "bootstrap/scss/variables";—— 组件样式依赖这些变量（如$primary、$grid-columns） -
@import "bootstrap/scss/mixins";——button-variant()、media-breakpoint-up()全靠它
注意：variables 文件里大量使用 !default，意味着你可以在它之前定义同名变量来覆盖，默认值才不会生效。
按需启用组件前，先关掉不用的功能开关
Bootstrap 5 提供了 $enable-* 系列布尔变量，禁用后对应组件的 CSS 和 JS 都不会生成。不改这个，光删 @import 行可能没用——某些组件（如 tooltip）被其他模块隐式依赖。
- 在
@import "bootstrap/scss/variables"之前加：$enable-dropdown: false !default;$enable-modal: false !default;$enable-tooltip: false !default; - 禁用 carousel、toast、offcanvas 等非必需交互组件时，同样加对应开关
- 如果完全不用表单验证样式，设
$enable-form-validation-icons: false
这些变量实际定义在 node_modules/bootstrap/scss/_variables.scss 里，搜 $enable- 就能看到全部可选项。
utilities 工具类是体积黑洞，别无脑全开
默认开启全部断点 + 全部间距/颜色/阴影变体，utilities 单独就能贡献 40KB+ CSS。真正要用的往往只是 mt-2、text-center、fw-bold 这几类。
- 重写
$utilitiesmap 前，先精简$grid-breakpoints：$grid-breakpoints: (xs: 0, md: 768px);—— 删掉sm和lg断点，响应式工具类直接少一半 - 注释掉不需要的 utility 组，比如不用阴影就删掉整个
shadow区块 - 避免启用
hover或focus变体（如bg-primary:hover），除非按钮/链接真需要悬停态
最后再 @import "bootstrap/scss/utilities"，否则新定义的 $utilities 不会被读取。
最易被忽略的一点：JS 组件也得手动引入。即使 CSS 里删掉了 modal，如果 node_modules/bootstrap/js/dist/modal.js 被其他脚本 import 了，它仍会打进 bundle。查 package-lock.json 或用 webpack-bundle-analyzer 确认 JS 层是否真干净。
