直接改$primary没反应是因为.btn-primary等组件不直接读取$primary，而是依赖$theme-colors映射和color-contrast()函数推导；必须在@import "bootstrap/scss/variables"前赋值$primary并用map-merge更新$theme-colors，否则组件样式不会生成。
为什么直接改 $primary 没反应？
不是变量没生效，而是 Bootstrap 5 的组件样式（比如 .btn-primary）不直接读 $primary，而是通过 $theme-colors map 和 color-contrast() 函数推导出来的。你只改了 $primary，但 $theme-colors 还是旧的，.btn-primary 就压根不会生成。
必须在 @import "bootstrap/scss/variables" 之前就赋值，并同步更新依赖项：
-
$primary: #4f46e5;→ 直接赋值，别加!default -
$theme-colors: map-merge($theme-colors, ("primary": $primary));→ 确保 map 包含新值 -
$body-bg: #f8f9fa;这类独立变量可单独设，但像$input-border-radius这种会被$border-radius覆盖，得看变量间依赖链
Webpack里SCSS入口文件怎么组织才不炸？
顺序错了，整个定制就白干。Webpack 编译时会按 @import 顺序展开，变量必须在被读取前定义。
正确结构（写在你的 src/custom.scss 里）：
立即学习“前端免费学习笔记（深入）”；
$primary: #3498db; $border-radius: 0.375rem; @import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/mixins"; @import "~bootstrap/scss/root"; @import "~bootstrap/scss/reboot"; @import "~bootstrap/scss/type"; // ……按需导入组件，或直接 @import "~bootstrap/scss/bootstrap";
- 千万别把
@import "bootstrap/scss/bootstrap"放最前面——它会提前用默认变量编译 - 想删组件减体积？跳过
carousel、tooltip这类 import，但别漏root和reboot，否则 CSS 重置失效 - Vite 用户注意：
@use在部分版本对 Bootstrap 的 mixin 支持不稳定，坚持用@import
Webpack配置里loader顺序错一位，CSS就全丢
Webpack 默认完全忽略 .scss 文件，不报错也不警告，只是样式不进 DOM——这是最常被误判为“变量覆盖失败”的真实原因。
必须配齐 loader，且顺序不可颠倒：
- 开发环境：
style-loader→css-loader→sass-loader - 生产环境：
MiniCssExtractPlugin.loader→css-loader→sass-loader - 漏装
sass（不是node-sass）会导致sass-loader编译失败，错误提示是Cannot find module 'sass'
检查 webpack.config.js 中 rules 是否包含：
{
test: /\.(scss|sass|css)$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
'sass-loader'
]
}
自定义 class 为什么用不了 spacing() 或 make-col()？
这些函数和 mixin 只在 Bootstrap 的 Sass 上下文中可用，如果你把自定义 class 写在 @import "bootstrap/scss/bootstrap" 之前，它们根本没被声明。
所有你自己写的 SCSS 规则，必须放在全部 Bootstrap @import 之后：
@import "~bootstrap/scss/bootstrap";
// ✅ 正确：此时 spacing()、make-col-ready() 都已可用
.feature-card {
@include make-col-ready();
@include make-col(4);
margin-bottom: spacing(4);
}
- 别在 JS 里 import
bootstrap.min.css后再 import 自己的 SCSS——那只是纯 CSS，没法调用 Sass 函数 - 如果用了
mini-css-extract-plugin，确保publicPath配置正确，否则字体、图标等资源 404
真正容易被忽略的点：Sass 变量覆盖是编译期行为，不是运行时；Webpack 不会“动态替换”已生成的 CSS，每次改变量都必须触发重新编译，热更新有时会缓存旧结果，强制重启 dev server 更可靠。
