Error in bootstrap-vue/src/index.scss

Describe the bug

Cannot use bootstrap-vue in my vue project.

Steps to reproduce the bug

1. Serve the app.

error  in ./node_modules/bootstrap-vue/src/index.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: 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

Expected behavior

Compile scss without errors.

Versions

Libraries:

• BootstrapVue: 2.17.1
• Bootstrap: 4.5.2
• Vue: 2.6.12

Additional context

My main.js file:

import Vue from 'vue'
...
import '@/assets/css/plugins/bootstrap/config.scss'
import 'bootstrap/scss/bootstrap.scss'
import 'bootstrap-vue/src/index.scss'
...

[AbrahamBrookes]

I landed here on the exact same error, after some mussing around I found out that I had installed bootstrap v5 instead of the (current, supported) v4. Just, you know, check for that as well.

[Hiws]

I figure multiple people will land on this because doing npm install bootstrap will now install Bootstrap 5 by default given that it released out of beta a few days ago. So to solve this run npm install bootstrap@4.5.3 instead, to specifically install the latest version of Bootstrap that BootstrapVue supports.