Rails 8自定义Bootstrap主题色无效问题求助

问题出在Sass变量的定义顺序：你把自定义主题色代码写在了导入Bootstrap核心样式之后，此时Bootstrap已经加载了默认的$primary和$theme-colors变量，你的自定义值无法覆盖这些已加载的默认值。

正确的代码结构 #

修改application.bootstrap.scss，将自定义变量放在Bootstrap核心导入语句之前：

// 自定义主题变量（必须在导入Bootstrap前声明）
$primary: #792c2c;

$theme-colors: (
  'primary': $primary
);

// 导入Bootstrap核心样式及图标
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';

原理说明 #

Bootstrap的Sass变量都带有!default标记，意思是仅当变量未被提前定义时，才使用默认值。所以把自定义变量放在导入语句之前，就能让Bootstrap优先使用你的自定义值，而非默认值。

后续操作 #

• 开发环境：重启Rails服务器即可生效，无需执行资产预编译。
• 生产环境：执行rails assets:precompile后重启服务。

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