直接 npm install bootstrap 不提供 SCSS 源文件，无法修改 $primary 或删 carousel；需 git 克隆官方仓库并运行 npm run css 编译，或通过 import "bootstrap/scss/bootstrap.scss" 配合前置自定义变量覆盖实现定制。
直接 npm install bootstrap 不能编译 SCSS
想改 $primary、删 carousel 组件、或者调试 Sass 编译流程？npm install bootstrap 不行——它只装编译好的 dist/css/bootstrap.css 和 source map，压根不带 scss/ 目录、package.json 里的构建脚本，也没 functions.scss 这类源文件。
必须用 Git 克隆官方仓库：
git clone https://github.com/twbs/bootstrap.git- 进目录后运行
npm install（注意：Node.js ≥ 18，否则报engines.node不匹配） - 这时才能跑
npm run css（只编译样式，快）或npm run dist（全量产物）
别去 node_modules/bootstrap 里翻 package.json——它没有 scripts 字段，npm run dist 肯定失败。
在项目里正确 @import Bootstrap SCSS
常见错误是写 @import "bootstrap" 或 @import "bootstrap/scss"，这两者都找不到入口文件。Bootstrap 的 SCSS 入口是 bootstrap/scss/bootstrap.scss，且它依赖前置模块（functions、variables 等）。
立即学习“前端免费学习笔记（深入）”；
正确做法取决于你的构建工具：
- Webpack +
sass-loader：配includePaths: ["node_modules"]，然后写@import "bootstrap/scss/bootstrap"; - 或用
~语法：@import "~bootstrap/scss/bootstrap";（但注意：Bootstrap 5.3+ 启用了package.json#exports，~可能失效，优先走includePaths） - 命令行调
sassCLI：必须加--load-path=node_modules，否则@import "bootstrap/scss/bootstrap"直接报File to import not found
变量覆盖必须放在所有 Bootstrap @import 之前，顺序错就白改：
// ✅ 正确 $primary: #ff6b6b; $enable-shadows: false; @import "bootstrap/scss/bootstrap"; // ❌ 错误：variables 已被加载，再赋值无效 @import "bootstrap/scss/variables"; $primary: #ff6b6b; @import "bootstrap/scss/bootstrap";
修改 _variables.scss 后没生效？检查这三处
改了 scss/_variables.scss 但 dist/css/bootstrap.css 没变，大概率卡在这三个地方：
- 没手动运行
npm run css或npm run dist——保存文件不会自动触发编译 - 改的是源码里的
_variables.scss，但你项目里@import的是node_modules/bootstrap/scss/bootstrap.scss，它用的是自己打包进来的变量，跟你本地改的无关；要改就得在克隆的仓库里改，再编译 - 浏览器缓存旧 CSS：DevTools 开着时勾选了 “Disable cache” 就没事；否则强制刷新（
Cmd+Shift+R/Ctrl+F5）
Windows 用户额外注意：npm run css 报 Error: spawn git ENOENT，说明系统 PATH 没加 Git 的 bin 目录（如 C:\Program Files\Git\bin）。
SCSS 编译环境的现实权衡
搭完整编译环境确实能深度定制，但代价明显：
- 体积大：克隆整个仓库 >100MB，CI 构建时间拉长
- 维护成本：每次升级 Bootstrap 版本得重新
git checkout v5.3.3、重装依赖、验证构建脚本是否兼容 - 团队协作门槛：新人得理解
npm run cssvsnpm run dist区别，还得避开 Windows 下 Git PATH 问题 - 多数项目其实不需要动源码：用
additionalData在 Vite/Webpack 里全局注入自定义变量，配合按需引入组件 JS，已覆盖 90% 场景
真正需要源码编译的，往往只发生在设计系统级改造、主题引擎开发、或向社区提 PR 时——其他时候，老实用 npm install bootstrap + 自定义变量导入更稳。
