Bootstrap 5 如何配置 SCSS 编译环境 Bootstrap 开发环境优缺点-Bootstrap教程-PHP中文网

直接 npm install bootstrap 不提供 SCSS 源文件，无法修改 $primary 或删 carousel；需 git 克隆官方仓库并运行 npm run css 编译，或通过 import "bootstrap/scss/bootstrap.scss" 配合前置自定义变量覆盖实现定制。

bootstrap 5 如何配置 scss 编译环境 bootstrap 开发环境优缺点

直接 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）
命令行调 sass CLI：必须加 --load-path=node_modules，否则 @import "bootstrap/scss/bootstrap" 直接报 File to import not found

变量覆盖必须放在所有 Bootstrap @import 之前，顺序错就白改：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

// ✅ 正确
$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 css vs npm run dist 区别，还得避开 Windows 下 Git PATH 问题
多数项目其实不需要动源码：用 additionalData 在 Vite/Webpack 里全局注入自定义变量，配合按需引入组件 JS，已覆盖 90% 场景

真正需要源码编译的，往往只发生在设计系统级改造、主题引擎开发、或向社区提 PR 时——其他时候，老实用 npm install bootstrap + 自定义变量导入更稳。