如何设置CSS颜色匹配Bootstrap主题，自定义类复用bg-primary配色

方案1：原生CSS直接调用（无需预处理器，零额外导入） #

Bootstrap 5及以上版本内置了全局CSS变量，你可以直接调用--bs-primary变量实现效果，无需修改任何配置、无需导入额外文件：

.my_css_class{
    background-color: var(--bs-primary);
}

该方案会自动同步你对Bootstrap主题色的自定义修改，不需要手动更新色值。

方案2：SASS轻量调用（无需导入全量Bootstrap源码） #

不需要导入Bootstrap全量SASS文件，仅单独引入核心变量文件即可调用$primary变量：

// 路径根据你的项目Bootstrap安装位置调整即可，仅导入变量文件
@import "node_modules/bootstrap/scss/variables";

.my_css_class {
  background-color: $primary;
}

该方案兼容所有支持SASS的Bootstrap版本，文件体积增量极小。

低版本Bootstrap兼容方案 #

如果使用Bootstrap 4及更早版本没有内置对应CSS变量，也不需要自定义主题色的场景，可以直接写死默认primary色值：

.my_css_class{
    background-color: #0d6efd;
}

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