`Syntax Error: SassError: Undefined variable.` After adding bootstrap-vue in vue 3

[KonradLinkowski]

Hi, creating a project and adding bootstrap-vue causes error:

 ERROR  Failed to compile with 1 error                                                                          13:39:10

 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 2: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_modu
les/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loade
r/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??re
f--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/mai
n.js

Steps to reproduce:

1. Install vue-cli globally - yarn global add @vue/cli
2. Create new project - vue create app-name
3. Go to project directory - cd app-name
4. Add bootstrap-vue - vue add bootstrap-vue
5. Select vue version 3
6. Answer yes to each question
7. Run the project - yarn serve

[KonradLinkowski]

Seems like removing @import "~@/assets/scss/vendors/bootstrap-vue/index"; from App.vue removes this error, but create other

config.js?228e:6 Uncaught TypeError: Cannot read property 'prototype' of undefined
    at eval (config.js?228e:6)
    at Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:6767)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (props.js?cf75:1)
    at Module../node_modules/bootstrap-vue/esm/utils/props.js (chunk-vendors.js:7043)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (model.js?58f2:1)
    at Module../node_modules/bootstrap-vue/esm/utils/model.js (chunk-vendors.js:6959)

In the chrome browser in this case

[GregYankovoy]

@fech-dev any ideas on what needs to be done to fix this error?

[fm96-dev]

I have found the bug, i will fix it between today and tomorrow.

[banpar]

have the same problem here.

[fm96-dev]

@KonradLinkowski

Seems like removing @import "~@/assets/scss/vendors/bootstrap-vue/index"; from App.vue removes this error, but create other

config.js?228e:6 Uncaught TypeError: Cannot read property 'prototype' of undefined
    at eval (config.js?228e:6)
    at Module../node_modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:6767)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (props.js?cf75:1)
    at Module../node_modules/bootstrap-vue/esm/utils/props.js (chunk-vendors.js:7043)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (model.js?58f2:1)
    at Module../node_modules/bootstrap-vue/esm/utils/model.js (chunk-vendors.js:6959)

In the chrome browser in this case

It gives an error because bootstrap-vue doesn't yet support vue 3, as you can read here bootstrap-vue/bootstrap-vue#5196. So you still have to use Vue 2 for the moment.

[KonradLinkowski]

@fech-dev you are correct. Seems like creating a cli plugin for vue-cli-3 that supports only vue-2 can be misleading.

Waiting for bootstrap-vue to support vue 3

[robertdeboer]

I can confirm this error happens. However, I see it when using Vue CLI 4.x and any version of Vue choosen - 2 or 3

[CodingBapthi]

Hi,
I also tried it with Vue 2.0 as well as Vue 3.0.
And it always comes back the same error.

This is now with this Setup:

[GregYankovoy]

I have merged and published @fech-dev 's fix as version 0.8.2 on npm. Please give that a try and let me know if it fixes your issues.

[CodingBapthi]

Hello thanks for your quick solution @GregYankovoy .
I just quickly tested both Vue.js versions.
The deprecation warnings occur on both versions. With version 3 the page stays white.

But with version 2 the page is rendered normally and you can include bootstrap components.

[fm96-dev]

Hello thanks for your quick solution @GregYankovoy.
I just quickly tested both Vue.js versions.
The deprecation warnings occur on both versions. With version 3 the page stays white.

But with version 2 the page is rendered normally and you can include bootstrap components.

As said before, bootstrap-vue doesn't support vue 3 yet, so it's ok you see errors or a white page.

The deprecation warnings are a bootstrap's problem as you can see here, so you can ignore them.

[dimzeta]

I still have this issue on a fresh install.
It happens only when I choose YES to "Use scss?".

 ERROR  Failed to compile with 1 error                                                                                                                        16:16:00

 error  in ./src/App.vue?vue&type=style&index=0&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 20: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/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& 4:14-416 15:3-20:5 16:22-424
 @ ./src/App.vue?vue&type=style&index=0&lang=scss&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.20:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

package.json

{
    "dependencies": {
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.17.3",
    "core-js": "^3.6.5",
    "popper.js": "^1.16.1",
    "portal-vue": "^2.1.7",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.11",
    "sass-loader": "^10.0.2",
    "vue-cli-plugin-bootstrap-vue": "~0.8.2",
    "vue-template-compiler": "^2.6.11"
  },
}

[rankydev]

any updates here?

i have the same issue using vue 3 and vue-cli-plugin-bootstrap-vue

[CodingBapthi]

@rankydev No not much so far. If you want to use bootstrap best to embed it plane