Overriding Bootstrap default style in BootstrapVue application: Undefined variable error

Question

I've created a new Vue application in which I'm using Bootstrap-Vue for styling, and I'm currently facing issues trying to override the default style of Bootstrap.

Error message: [sass] Undefined variable.

11 │ $b-custom-control-indicator-size-lg: $custom-control-indicator-size * 1.25 !default;
   │                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

node_modules/bootstrap-vue/src/_variables.scss 11:38  @import
node_modules/bootstrap-vue/src/index.scss 7:9         @import
src/app.scss 7:9                                      root stylesheet

Steps to reproduce:

1. Created a new Vue app with npm create vue@2, not using Typescript
2. Installed Bootstrap & BS-Vue with npm install bootstrap bootstrap-vue
3. Added sass & sass-loader: npm add -D sass sass-loader
4. Followed the instructions in this documentation at https://bootstrap-vue.org/docs

app.scss: Placed in /src

// Define variable defaults
$body-bg: #000;
$body-color: #111;

// Then import Bootstrap and BootstrapVue SCSS files (order is important)
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

main.js:

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

import "./assets/main.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");


  

Answer 1

Update: Realised that the reason for this error is because I was using the wrong version of Bootstrap! Was using Bootstrap 5 instead of 4.

Hope this helps someone else in the future!