要使bootstrap的$primary等变量生效，必须在自定义scss文件中按顺序导入：先声明变量，再依次导入functions、variables、mixins，最后导入bootstrap；否则变量将回退默认值。
怎么改Bootstrap的$primary这类颜色变量才真正生效
改完_variables.scss里的$primary却没看到按钮变色？大概率是没在自定义入口文件里正确引入顺序。Bootstrap的Sass编译依赖“先定义变量，再加载组件”，一旦@import "bootstrap/scss/bootstrap"出现在变量声明之前，所有变量都会回退到默认值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 新建
custom.scss，第一行就写$primary: #2563eb;（或其他你要的值） - 紧接着用
@import "bootstrap/scss/functions";、@import "bootstrap/scss/variables";、@import "bootstrap/scss/mixins"; - 最后才
@import "bootstrap/scss/bootstrap"; - 别直接改
node_modules/bootstrap/scss/_variables.scss——下次yarn install就没了
为什么改了$enable-rounded但.btn还是圆角
这个开关只控制Bootstrap内部是否生成border-radius相关CSS规则，但不覆盖已存在的样式。如果你的项目里有全局重置或第三方UI库注入了border-radius，它会层叠在Bootstrap输出之上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认
$enable-rounded: false;写在@import "bootstrap/scss/functions"之后、@import "bootstrap/scss/bootstrap"之前 - 检查浏览器开发者工具里
.btn的border-radius来源，看是不是被其他CSS规则强制覆盖 - 如果要彻底禁用圆角，还得同步设
$border-radius: 0;和$border-radius-sm: 0;等衍生变量
重编译时遇到File to import not found错误
常见于用sass CLI直接编译，但没配对--load-path指向Bootstrap的scss目录。Sass找不到bootstrap/scss/functions这种路径，不是路径写错，而是没告诉它去哪找。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
sass --load-path=node_modules/bootstrap/scss custom.scss dist/custom.css - 如果用Webpack，确保
sass-loader的additionalData或implementation配置正确，尤其注意Node Sass已废弃，优先用Dart Sass - 检查
node_modules/bootstrap下是否存在scss文件夹——某些精简版CDN包不带源码
修改$grid-breakpoints后响应式类名没生成
这个Map变量控制.col-md-6这类类名的生成逻辑，但仅当bootstrap/scss/grid被导入时才起作用。很多人只改了变量，却忘了Bootstrap默认不自动加载grid模块——它被包裹在bootstrap.scss里，但如果你跳过主入口、只导入部分模块，就得手动补上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认你的导入链里包含
@import "bootstrap/scss/grid";（或通过@import "bootstrap/scss/bootstrap"间接包含） -
$grid-breakpoints必须是map类型，例如(xs: 0, sm: 576px, md: 768px)，少一个键或单位写错（比如768漏了px）会导致整个grid编译失败 - 改完记得清掉Sass缓存（尤其是Webpack的
cache-loader或css-loader缓存），否则旧CSS可能还在用
变量覆盖看似简单，但Sass的导入顺序、模块依赖、缓存机制三者叠加，最容易在“以为改完了”的时候漏掉其中一环。
