Bootstrap中修改$spacer变量调整边距无效的问题求助

核心问题分析 #

你的代码存在两个关键错误，导致变量修改未生效：

1. 使用@import url()语法导入Bootstrap的SASS文件——这会让SASS预处理器将这些文件视为普通CSS文件，完全不解析其中的变量、函数等SASS逻辑，你的$spacer修改根本无法传递到Bootstrap内部。从输出的CSS也能看出，所有@import语句原封不动保留，说明SASS没有处理这些导入的文件。
2. 先导入_variables.scss再定义变量——Bootstrap的变量都用!default声明，只有当变量未被定义时才会生效。你先导入了_variables.scss，里面的$spacer已经被设置，后续再定义$spacer不会覆盖已有值。

修正后的SASS代码 #

// 先导入Bootstrap的函数文件，变量依赖它的逻辑
@import "../node_modules/bootstrap/scss/_functions.scss";

// 在导入Bootstrap核心文件前定义变量，优先级高于!default声明
$spacer: 15rem;

// 导入Bootstrap核心样式文件，内部会自动导入_variables.scss等依赖
@import "../node_modules/bootstrap/scss/bootstrap.scss";

:root {
  --bs-body-font-family: 'Inter', Arial;
}

h1 {
  font-size: 5.93rem;
  line-height: 121%;
}

h2 {
  font-size: 2.5rem;
  line-height: 212%;
}

h3 { 
  font-size: 1.5rem;
  line-height: 120%;
}

关键说明 #

• 移除@import中的url()，直接使用文件路径导入SASS文件，这样SASS才会解析文件内的变量和逻辑。
• 变量定义必须放在导入bootstrap.scss之前，且不需要提前导入_variables.scss——bootstrap.scss内部会按顺序导入_functions.scss、_variables.scss等依赖，而你提前定义的变量会覆盖_variables.scss中!default声明的默认值。

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