Vue2项目引入Bootstrap-Vue后编译报SassError: $black未定义

报错是Sass编译时找不到Bootstrap内置的$black基础变量，触发原因有两个：

• 你同时通过Vue CLI插件自动注入、手动自定义SCSS导入两种方式加载Bootstrap样式，出现了加载顺序冲突
• 报错路径里提到的src/assets/scss/vendors/bootstrap-vue/index.scss文件导入Bootstrap样式时，没有提前引入Bootstrap的变量文件，直接导入了_reboot.scss等依赖变量的业务样式文件

按以下步骤修改即可：

步骤1：清理重复导入逻辑 #

如果你需要自定义Bootstrap全局变量，完全用自己的app.scss管理样式导入的话，先删掉Vue CLI插件自动生成的样式导入：
打开src/plugins/bootstrap-vue.js，删掉里面默认自动导入的Bootstrap、BootstrapVue CSS代码，修改后代码如下：

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

步骤2：修正SCSS导入顺序 #

修改src/assets/app.scss的导入逻辑，确保先导入Bootstrap的变量、函数、混合宏文件，再自定义变量，最后导入完整的Bootstrap和BootstrapVue样式：

// 先导入Bootstrap核心前置依赖（变量、函数、混合宏）
@import 'node_modules/bootstrap/scss/_functions.scss';
@import 'node_modules/bootstrap/scss/_variables.scss';
@import 'node_modules/bootstrap/scss/_mixins.scss';

// 自定义全局变量（要放在Bootstrap变量导入之后，全量样式导入之前，才能覆盖默认值）
$body-bg: #000;
$body-color: #111;
// 按需添加其他自定义变量

// 最后导入全量样式
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

步骤3：清理额外的样式导入 #

检查src/App.vue的style标签，删掉里面手动导入的@import "@/assets/scss/vendors/bootstrap-vue/index.scss"这类重复导入代码，避免二次加载冲突。

步骤4：重新启动项目 #

执行npm run serve即可正常编译。

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