Error when including Bootstrap into Vue-Project

Question

I'm trying to include Bootstrap-Vue in my (fresh) Vue-Project. I've used the Bootstrap-Vue Vue CLI 3 plugin (vue add bootstrap-vue). Starting the app with npm run serve results in the following error:

Failed to compile.

./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/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/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
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 20:9                                      root stylesheet

My main.js looks like this:

import Vue from 'vue'
import './plugins/bootstrap-vue'
import App from './App.vue'
import './assets/app.scss'

Vue.config.productionTip = false

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

bootstrap-vue.js

import Vue from 'vue'

import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

app.scss

$body-bg: #000;
$body-color: #111;

@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

I'm pretty sure it has to do with importing some file, but I can't figure it out. I'm using Vue-Version 2.6.11.

Timo Timo · Accepted Answer · 2021-09-12T13:45:16

I've managed to solve the issue: when including bootstrap-vue via vue add bootstrap-vue, you will be asked three questions:

Use babel/polyfill? → Yes
Use scss? → Yes
Would you like to inject vars, functions and mixins in all SFC components? → If you answer "No" here, it will lead to the described error. Choose "Yes".

The last step that needs to be taken to make Bootstrap work properly, is importing the styles. You can do this by adding the following to your main.js:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Error when including Bootstrap into Vue-Project

1 Answers