如何重写CoreUI-Rails中被覆盖的Bootstrap Primary主题色？

这个问题的核心是SCSS变量的加载顺序——你得在CoreUI的样式被编译之前，就把自定义的主题色变量定义好，不然CoreUI已经用默认值生成了所有相关样式（比如btn-primary的背景色、边框色），后面再改变量根本不会生效。

下面是具体的修正步骤：

1. 调整变量定义与样式导入的顺序 #

把你的自定义变量文件放在CoreUI导入语句的前面，这样SCSS编译时会先用你的自定义值覆盖默认变量，再生成CoreUI的样式。

2. 正确覆盖主题色变量 #

修改你的_core-variables.scss，直接覆盖Bootstrap/CoreUI的核心变量：

// _core-variables.scss
$blue: #2482dc;
// 直接覆盖primary基础变量（Bootstrap/CoreUI的核心主题色依赖它）
$primary: $blue;
// 同时更新theme-colors映射，确保所有依赖这个映射的组件（如alert、badge等）也同步生效
$theme-colors: map-merge($theme-colors, (
  "primary": $blue
));

3. 更新application.scss的导入顺序 #

确保自定义变量先被加载：

// application.scss
// 先导入自定义变量，让CoreUI编译时使用你的值
@import "core-variables";
// 再导入CoreUI的核心样式
@import "coreui-free";
// 其他你的业务样式导入...

为什么之前的配置无效？因为你是先导入了coreui-free，这时候SCSS已经用默认的primary值编译了所有btn-primary相关的CSS规则，之后再定义的变量对已经生成的样式没有任何影响——SCSS变量是编译时生效的，不是运行时动态替换的。

另外补充：如果CoreUI有自己的专属主题色变量（比如部分版本里的$cui-primary），你可以同步覆盖它，但绝大多数情况下，覆盖Bootstrap的$primary和$theme-colors就足以改变所有btn-primary这类组件的样式了。

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