`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?

[fech-dev]

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

[banpar]

have the same problem here.

[fech-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 https://github.com/bootstrap-vue/bootstrap-vue/issues/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.

[fech-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

[fech-dev]

Hi everyone, Sorry if I didn't reply right away...

Anyway, I found the problem. When you add the plugin and you made these choices:

? Use babel/polyfill? **Yes**
? Use scss? **Yes**
? Would you like to inject vars, functions, and mixins in all SFC components? **No**

The plugin will install and create files correctly, but won't add the imports to bootstrap's and bootstrap-vue's variables, mixins, and functions. So you have this error.

I think that the solution could be removing the third option and make it mandatory, there's no reason to not add any sass abstracts to all vue files.

Let me know if that's okay with you and i-ll fix it asap.

[murugappanrm]

Hi,

I am having somewhat different problem. I am using Vue/CLI version 5.0.4. My steps as per documentation for Vue 3 CLI Plugin are:

(1) vue create my-app (2) cd my-app (3) vue add bootstrap-vue ?use babel/polyfill? Yes ?use scss? No (4) npm run serve

The package.json listing is:

I get these odd cryptic warnings:

When i run the app in the browser i get a blank page with the following console error:

I tried all sorts for tricks and options as documented, nothing worked. I need help