Bootstrap 5.3.3中自定义SCSS变量无法设置背景色求助

问题说明 #

使用Bootstrap 5.3.3，尝试通过自定义SCSS变量设置页面背景色，仅直接写--bs-body-bg CSS变量能生效，自定义SCSS变量完全无效，已尝试修改node_modules内variables.scss、更换编译器、重新编译均无效，不想使用插值法，寻求解决方法。

现有代码 #

SCSS代码 #

$enable-grid-classes: false;
$enable-cssgrid:true;

$deepBlue: #032f3e;

body {
    --bs-body-bg: orange ;
}

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

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="./scss/custom.css">
  <link rel="stylesheet" href="./node_modules/bootstrap/scss/bootstrap.scss">
  <title>Frontend Mentor | Single-page developer portfolio</title>
</head>
<body>
  <div class="container-fluid">
    <h1 class="h1">Hello World!</h1>
  </div>
</body>
</html>

解决方案 #

1. 调整SCSS文件结构与变量覆盖方式 #

Bootstrap的SCSS变量覆盖必须遵循先定义自定义变量，再导入Bootstrap核心的顺序，直接覆盖Bootstrap提供的全局变量即可，无需手动编写CSS变量：

// 1. 先设置Bootstrap功能配置变量
$enable-grid-classes: false;
$enable-cssgrid: true;

// 2. 定义自定义颜色变量
$deepBlue: #032f3e;

// 3. 覆盖Bootstrap默认背景色变量
$body-bg: $deepBlue;

// 4. 最后导入Bootstrap核心SCSS
@import "../node_modules/bootstrap/scss/bootstrap";

2. 修正HTML样式导入逻辑 #

浏览器无法直接解析SCSS源文件，且自定义SCSS已经导入了Bootstrap，因此只需保留编译后的自定义CSS文件导入，删除Bootstrap源文件的导入：

<link rel="stylesheet" type="text/css" href="./scss/custom.css">

注意：若编译工具将SCSS编译到独立CSS文件夹，路径需调整为对应输出路径（如./css/custom.css）。

3. 禁止修改node_modules内文件 #

修改node_modules中的Bootstrap源码不可取，依赖包更新后所有修改会丢失，所有自定义需求都应通过自有SCSS文件的变量覆盖实现。

原理说明 #

Bootstrap的SCSS采用变量优先级机制：在导入核心代码前定义的变量会覆盖默认变量，编译时Bootstrap会自动将SCSS变量转换为对应的CSS变量（如--bs-body-bg），无需手动编写CSS变量即可生效。

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