Bootstrap编译Sass文件 Bootstrap如何将scss编译成css-Bootstrap教程-PHP中文网

正确做法是配置 Sass 加载器解析 node_modules 路径后 @import "bootstrap/scss/bootstrap"; 变量需在首次导入前覆盖，CLI 编译须显式指定输入输出路径及 source map 参数。

用 `bootstrap` 官方 Sass 文件时，别直接 `@import "bootstrap"`

很多人把 bootstrap 的 scss/ 目录整个拷进项目，然后在主 main.scss 里写 @import "bootstrap"; —— 这会失败，因为官方源码里没有叫 bootstrap.scss 的入口文件。实际入口是 bootstrap/scss/bootstrap.scss，它本身又依赖 bootstrap/scss/functions、variables 等前置模块。

正确做法是确保 Sass 加载器（如 Dart Sass、webpack 的 sass-loader）能解析 node_modules 路径：

用 @import "~bootstrap/scss/bootstrap";（Webpack + sass-loader 场景）
或配置 includePaths: ["node_modules"]，再写 @import "bootstrap/scss/bootstrap";
如果手动调用 sass CLI，得加 --load-path=node_modules 参数

`sass` CLI 编译单个文件：路径和输出必须显式指定

运行 sass 命令时不指定输入输出路径，它不会自动找 scss/ 下所有文件，也不会默认生成同名 .css。常见错误是只输 sass main.scss，结果报错 No output path specified。

实操建议：

编译单个文件：sass src/main.scss dist/main.css
监听并自动编译：sass --watch src/main.scss:dist/main.css
要启用 source map：sass --source-map --embed-src --watch src/main.scss:dist/main.css
注意：Bootstrap 的 _variables.scss 不能单独编译，它是 partial，文件名必须以 _ 开头，且只能被 @import 引入

自定义变量前，必须在 `@import` Bootstrap 模块之前覆盖

Bootstrap 的 $enable-rounded、$primary 这类变量，只有在第一次 @import 任何 Bootstrap SCSS 文件前重新赋值才生效。一旦 functions 或 variables 被加载，再改就晚了。

典型错误顺序：

VPS Bootstrap

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

下载

@import "bootstrap/scss/variables";
$primary: #ff6b6b; // ❌ 太晚，已被读取
@import "bootstrap/scss/bootstrap";

正确顺序：

// ✅ 先覆盖变量
$primary: #ff6b6b;
$enable-shadows: false;

// 再导入 Bootstrap（它内部会 import functions → variables → mixins → …）
@import "bootstrap/scss/bootstrap";

Webpack + `sass-loader` 下，`~` 别乱用，路径解析容易错位

~ 是 sass-loader 的特殊语法，表示从 node_modules 开始解析，但它不识别 package.json 的 exports 字段。Bootstrap 5.3+ 使用了现代导出字段，直接 @import "~bootstrap/scss/bootstrap" 可能报 File to import not found。

解决办法：

降级兼容：用 @import "~bootstrap/scss/bootstrap.scss";（显式加后缀）
更稳方案：在 webpack 配置里补上 alias：{"bootstrap": path.resolve(__dirname, "node_modules/bootstrap/scss")}，然后写 @import "bootstrap/bootstrap";
避免 ~ 和相对路径混用，比如 @import "~/bootstrap/scss/mixins"; 是错的，~ 后不能接 /