Vue bootstrap-vue throwing error after installation - vue.js

Question

I am trying to add bootstrap Vue to a new project and after installation, it shows this error is there any fix to that?
Failed to compile with 1 error
11:44:32 error in
./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss
Syntax Error: SassError: Undefined variable. ╷ 29 │
-webkit-tap-highlight-color: rgba($black, 0); // 5 │ ^^^^^^ ╵ node_modules\bootstrap\scss_reboot.scss 29:37
#import src\assets\scss\vendors\bootstrap-vue\index.scss 4:9
#import src\App.vue 3:9 root
stylesheet
#
./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss
4:14-419 15:3-20:5 16:22-427 #
./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss #
./src/App.vue # ./src/main.js # multi
(webpack)-dev-server/client?http://192.168.1.4:8080&sockPath=/sockjs-node
(webpack)/hot/dev-server.js ./src/main.js
My build looks like that
{
"name": "bootstrap-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#babel/polyfill": "^7.11.5",
"bootstrap": "^4.5.2",
"bootstrap-vue": "^2.17.3",
"core-js": "^3.6.5",
"mutationobserver-shim": "^0.3.7",
"popper.js": "^1.16.1",
"portal-vue": "^2.1.7",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0-0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"vue-cli-plugin-bootstrap-vue": "~0.8.1"
}
}

Answer 1

bootstrap-vue currently does not support vue 3.0
See https://github.com/bootstrap-vue/bootstrap-vue/issues/5196

Answer 2

In your App.vue, you need to import _custom.scss before bootstrap style sheet as it contains the referenced variables.
<style lang="scss">
#import "~#/assets/scss/vendors/bootstrap-vue/_custom";
#import "~#/assets/scss/vendors/bootstrap-vue/index";
</style>
Note this error is not due to the use of Vuejs 3