bootstrap-vue配置自定义primary等主题色不生效如何解决

导致配置不生效的核心问题有3个，按以下步骤逐一修正即可：

1. 替换错误的SCSS引入语法 #

main.scss中使用的@import url('./theme.scss')是原生CSS的引入规则，构建工具处理时不会将theme.scss内定义的Sass变量注入到Bootstrap的编译流程中，你写的所有变量覆盖逻辑都不会在Bootstrap默认样式生成前生效。
直接替换为Sass原生的引入语法：

// main.scss
@import './theme.scss';

// 其余自定义body等样式正常写在引入语句之后即可
body {
  // 你的自定义样式
}

2. 删除入口文件中预编译的默认主题CSS #

检查项目入口文件（通常是main.js/main.ts），如果存在以下引入官方预编译CSS的代码，必须全部删除：

// 以下两行必须删除，否则默认主题样式会覆盖你自定义编译的主题样式
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

所有Bootstrap相关样式都需要通过你自己写的theme.scss引入并编译，不能同时加载官方预编译好的默认主题包。

3. 优化theme.scss配置逻辑 #

你原来的配置存在两个小问题：一是直接给$theme-colors赋值会覆盖掉默认的success、warning、info等未修改的预设色值，二是单独定义$primary:red属于冗余代码，三是手写相对node_modules的长路径容易出现路径解析错误。修正后的配置如下：

// 所有覆盖变量必须定义在引入bootstrap之前
$body-bg: red;
$body-color: #111;

// 通过map-merge合并默认主题配置，仅修改需要自定义的色值，保留其他预设色
$theme-colors: map-merge(
  $theme-colors,
  (
    "primary": red,
    "danger": #caaf12
    // 需要修改其他主题色直接在此处追加即可，比如 "success": #28a745
  )
);

// 引入顺序不可颠倒，先引bootstrap核心scss，再引bootstrap-vue的scss
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-vue/src/index.scss';

如果完成以上步骤后仍未生效，检查项目的sass-loader配置，确认没有通过additionalData字段全局注入其他Bootstrap变量配置，重启开发服务、清除浏览器缓存后即可正常加载自定义主题。

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