Bootstrap 5.2 SCSS按需导入报错，求正确导入序列

我尝试只导入Bootstrap 5.2的特定SCSS文件，而非完整的bootstrap.css，但遇到了多种报错，且未找到解决方案。

无法正常运行的导入方式 #

报错：Function not found: to-rgb #

• 方式1：

@import '/node_modules/bootstrap/scss/bootstrap.scss';

或

@import '/node_modules/bootstrap/scss/bootstrap';

• 方式2：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";

报错：Undefined variable: "$gutters" #

• 方式3：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";

• 方式4：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/containers";

• 方式5：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/containers";
@import 'bootstrap/scss/_nav';
@import 'bootstrap/scss/_navbar';

可运行但无法满足需求的导入方式 #

这些方式能正常编译，但缺少我需要的grid等组件：

• 方式1：导入完整Bootstrap（非我所需）

@import "/node_modules/bootstrap/dist/css/bootstrap.css";

• 方式2：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

• 方式3：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/containers";

• 方式4：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/containers";
@import 'bootstrap/scss/_nav';
@import 'bootstrap/scss/_navbar';

正确的Bootstrap 5.2 SCSS导入序列 #

要解决上述报错，必须严格遵循Bootstrap SCSS文件的依赖顺序，核心依赖需优先导入，后续组件按依赖关系排列。以下是包含grid、containers、nav、navbar的示例序列：

// 核心基础文件：必须按此顺序导入，提供核心函数、变量、映射和混合宏
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";

// 可选基础样式：如需重置浏览器默认样式可添加
@import "bootstrap/scss/reboot";

// 布局组件：grid依赖maps中的$gutters变量，需在maps之后导入
@import "bootstrap/scss/grid";
@import "bootstrap/scss/containers";

// 导航组件
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";

报错原因说明 #

• Function not found: to-rgb：要么是SCSS编译器未正确解析node_modules路径，导致functions.scss未被加载；要么是导入顺序错误，to-rgb函数需在使用它的文件之前导入。
• Undefined variable: "$gutters"：$gutters变量定义在maps.scss中，之前的导入序列未包含该文件，导致grid或containers组件引用时出错。

内容的提问来源于stack exchange，提问作者nickornotto