必须引入 Bootstrap Sass 源码并按顺序导入：先自定义变量，再 functions、variables，最后 bootstrap 或按需组件；覆盖变量需在 variables 前直接赋值，不可加 !default，并同步更新 theme-colors 等依赖项。
如何在项目中正确引入 Bootstrap 的 Sass 源码而非 CSS 文件
不引入 bootstrap.min.css，否则变量覆盖完全失效。必须让构建工具（如 Webpack、Vite）能处理 _variables.scss 并参与编译链。
- 使用 npm 安装完整包：
npm install bootstrap（不是bootstrap-icons或 CDN 链接） - 确保你的入口 SCSS 文件（如
main.scss）以正确顺序@import：先自定义变量，再@import "bootstrap/scss/functions"，然后@import "bootstrap/scss/variables"，最后@import "bootstrap/scss/bootstrap" - Vite 用户注意：需安装
sass和sass-loader（Vite 本身支持 sass，但嵌套@use语法时推荐用@import兼容写法） - Webpack 用户检查
sass-loader版本是否 ≥ 12，旧版对!default处理有 bug
覆盖 $primary 等颜色变量为什么有时没生效
根本原因：Bootstrap 的组件样式（如 .btn-primary）不是直接读取 $primary，而是依赖 theme-colors map 和 color-contrast() 函数推导出的衍生值。
- 必须在
@import "bootstrap/scss/variables"之前就重定义$primary，且不能带!default - 如果还用了
$theme-colors自定义（比如加了purple: #8a6de9），要同步更新$theme-colorsmap，否则.btn-purple不会生成 - 按钮文字色由
color-contrast($primary)决定，它依赖$black/$white和亮度阈值$min-contrast-ratio—— 这些也得提前设好 - 示例错误写法：
$primary: #4f46e5 !default→!default会被原变量挡掉，直接赋值即可
自定义一个 .card-feature 组件并复用 Bootstrap 的栅格与间距系统
别重复写 margin 或 col-lg-4 类，直接在 Sass 中调用 Bootstrap 提供的 mixin 和函数。
- 用
make-col-ready()+make-col(4)实现响应式列宽，比手写flex: 0 0 33.333%更可靠 - 间距统一走
spacing()函数：margin-bottom: spacing(4)（对应1rem），避免硬编码像素值 - 圆角、阴影等可复用
$border-radius-lg、$box-shadow-sm等变量，它们已随主题配置自动更新 - 关键点：所有自定义 class 必须写在
@import "bootstrap/scss/bootstrap"之后，否则无法访问已编译的 mixin
生产环境 CSS 体积暴增？警惕 @import 引入整包导致的冗余
默认 @import "bootstrap/scss/bootstrap" 会引入全部组件（含你不用的 carousel、tooltip），变量覆盖并不能删减代码。
立即学习“前端免费学习笔记（深入）”；
- 按需导入更安全：
@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→@import "bootstrap/scss/mixins"→ 再只@import "bootstrap/scss/card"、"bootstrap/scss/buttons"等实际用到的部分 - 禁用不需要的组件：在变量前设置
$enable-gradients: false、$enable-shadows: false，减少 CSS 规则数 - 检查最终 CSS 是否含未使用的选择器（如
.alert-dismissible），可用 PurgeCSS 配合类名白名单清理 - 注意：
$enable-negative-margins默认为 true，若你没用负边距，关掉它能省下不少规则
变量覆盖本身很轻量，真正影响体积的是“引入了什么”，而不是“改了什么”。别以为改几个颜色就能绕过按需加载这步。
