在BootstrapVue项目中覆盖Bootstrap默认样式：未定义变量错误

错误原因 #

1. 版本不兼容：BootstrapVue仅支持Bootstrap 4.x版本，若你安装了Bootstrap 5，其变量命名、结构与Bootstrap 4差异极大，导致BootstrapVue的SCSS文件无法找到$custom-control-indicator-size这类Bootstrap 4专属变量。
2. 样式重复导入：main.js中同时导入了预编译的Bootstrap/BootstrapVue CSS文件和自定义SCSS，不仅会引发样式冲突，还会干扰SCSS变量的传递。

解决方案 #

1. 安装兼容的Bootstrap版本 #

卸载当前Bootstrap，安装与BootstrapVue匹配的Bootstrap 4.6.x版本：

npm uninstall bootstrap
npm install bootstrap@4.6.2

2. 清理main.js中的重复样式导入 #

删除预编译的CSS导入语句，仅保留自定义SCSS的导入：

import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";

import "./assets/main.css";
// 移除以下两行预编译CSS导入
// import "bootstrap/dist/css/bootstrap.css";
// import "bootstrap-vue/dist/bootstrap-vue.css";

import './app.scss'

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

3. 优化app.scss的导入路径 #

无需写完整的node_modules路径，直接通过包名导入更规范，同时确保变量定义在导入SCSS文件之前：

// 自定义覆盖变量（必须在导入SCSS前定义）
$body-bg: #000;
$body-color: #111;

// 导入Bootstrap SCSS
@import 'bootstrap/scss/bootstrap';
// 导入BootstrapVue SCSS
@import 'bootstrap-vue/src/index.scss';

4. 适配Vue 2的Sass依赖版本 #

Vue 2项目需使用兼容的sass和sass-loader版本，避免因版本过高导致编译错误：

npm install -D sass@1.32.13 sass-loader@10.2.1

完成以上步骤后，重新启动项目，Sass变量未定义的错误即可解决。

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