Vue项目安装bootstrap-vue后编译报错SassError: Undefined variable如何修复

• 版本不兼容：当前安装的BootstrapVue 2.17.3仅适配Vue 2.x版本，而项目依赖的是Vue 3.x，这是核心报错原因。
• SCSS导入顺序错误：你在自定义的index.scss中直接导入了reboot.scss，但Bootstrap的基础变量（如报错的$black）定义在_variables.scss中，未提前导入变量文件就会触发未定义错误。

你可以根据项目需求选择以下任意一种方案修复：

方案一：降级到Vue 2.x使用（兼容性最好，稳定无坑） #

1. 先卸载Vue 3相关不兼容依赖：

npm uninstall vue vue-router vuex @vue/compiler-sfc eslint-plugin-vue

2. 安装Vue 2生态对应版本依赖：

npm install vue@2.6.x vue-router@3.x vuex@3.x eslint-plugin-vue@6.x

3. 调整SCSS导入顺序，打开src/assets/scss/vendors/bootstrap-vue/index.scss，把变量、函数文件放在最顶部导入：

// 必须先导入bootstrap的函数和变量
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
// 再导入其他bootstrap、bootstrap-vue样式文件
@import "~bootstrap/scss/reboot";
@import "~bootstrap-vue/src/scss/bootstrap-vue";

4. 执行npm run serve重启项目即可正常编译。

方案二：Vue 3项目使用适配版BootstrapVue #

如果项目必须使用Vue 3，需要更换为BootstrapVue的Vue 3适配版本：

1. 卸载现有旧版本相关依赖：

npm uninstall bootstrap bootstrap-vue vue-cli-plugin-bootstrap-vue

2. 安装Vue 3适配的BootstrapVue Next和Bootstrap 5：

npm install bootstrap@5.x bootstrap-vue-next

3. 在main.js中注册组件，导入样式时同样先导入Bootstrap变量文件再导入其他样式即可。

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