Use BootstrapVue on every component in Vue.js - vue.js

Question

I am making a Vue.js Webapp. I am using raw Vue.js with BootstrapVue and SCSS. The scss styles work globally after I imported them in the app entry point, which in my case is the main.js file in the src folder of the project. But the BootstrapVue styles do not work anymore when I use them in any other .vue file except the main file "App.vue".
This is my vue.config.js file:
module.exports = {
css: {
sourceMap: true,
loaderOptions: {
sass: {
prependData: `
#import "src/scss/_variables.scss";
#import "node_modules/bootstrap/scss/bootstrap";
#import "node_modules/bootstrap-vue/src/index.scss";
`,
}
}
}
};
And this is my main.js file and therefore the entry point of the app:
import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "./scss/global.scss";
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
new Vue({
render: (h) => h(App),
}).$mount("#app");
I imported BootstrapVue in my global.scss additionally. I did try to import my global.scss file in the component's style tag, I tried to import BootstrapVue directly in my component's style tag but that didn't work either.
So I am basically asking you for a solution to use BootstrapVue globally in any Vue.js Component. Maybe I made some mistake I did not notice. The error message in the console didn't really help me solve the problem.
EDIT:
This is my package.json file:
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.5.0",
"bootstrap-vue": "^2.14.0",
"core-js": "^3.6.4",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

Answer 1

You're missing .scss on #import "node_modules/bootstrap/scss/bootstrap";. Should be #import "node_modules/bootstrap/scss/bootstrap.scss";