bootstrap-vue: Error in bootstrap-vue/src/index.scss

Describe the bug

Cannot use bootstrap-vue in my vue project.

Steps to reproduce the bug

Serve the app.

error  in ./node_modules/bootstrap-vue/src/index.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.

   ╷
11 │ $b-custom-control-indicator-size-lg: $custom-control-indicator-size * 1.25 !default;
   │                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/bootstrap-vue/src/_variables.scss 11:38  @import

Expected behavior

Compile scss without errors.

Versions

Libraries:

BootstrapVue: 2.17.1
Bootstrap: 4.5.2
Vue: 2.6.12

Additional context

My main.js file:

import Vue from 'vue'
...
import '@/assets/css/plugins/bootstrap/config.scss'
import 'bootstrap/scss/bootstrap.scss'
import 'bootstrap-vue/src/index.scss'
...

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 22 (2 by maintainers)

Commits related to this issue

Update how Bootstrap styles are imported https://github.com/bootstrap-vue/bootstrap-vue/issues/5797#issuecomment-947986938 — committed to kinow/jena by kinow 2 years ago
Update how Bootstrap styles are imported https://github.com/bootstrap-vue/bootstrap-vue/issues/5797#issuecomment-947986938 — committed to kinow/jena by kinow 2 years ago

Most upvoted comments

I landed here on the exact same error, after some mussing around I found out that I had installed bootstrap v5 instead of the (current, supported) v4. Just, you know, check for that as well.

+133

AbrahamBrookes on Feb 16, 2021

I figure multiple people will land on this because doing npm install bootstrap will now install Bootstrap 5 by default given that it released out of beta a few days ago. So to solve this run npm install bootstrap@4.5.3 instead, to specifically install the latest version of Bootstrap that BootstrapVue supports.

+53

Hiws on May 10, 2021

As described on the Getting Started page, you need to import bootstrap/scss/bootstrap.scss and bootstrap-vue/src/index.scss into a single scss file, and then import this single file your main.js.

https://bootstrap-vue.org/docs#using-module-bundlers

Place all of the SCSS @imports into a single SCSS file, and import that single file into your project. Importing individual SCSS files into your project will not share variable values and functions between files by default.

+23

Hiws on Sep 17, 2020

I landed here on the exact same error, after some mussing around I found out that I had installed bootstrap v5 instead of the (current, supported) v4. Just, you know, check for that as well.

This worked for me, also had installed v5 of bootstrap, changing it to 4 solved it

+15

arudovwen on May 6, 2021

I figure multiple people will land on this because doing npm install bootstrap will now install Bootstrap 5 by default given that it released out of beta a few days ago. So to solve this run npm install bootstrap@4.5.3 instead, to specifically install the latest version of Bootstrap that BootstrapVue supports.

Thank you a lot!

hoangnguyen-xenia on May 12, 2021

to anyone who has encountered this problem, you need to connect style variables directly from bootstrap vue to solve it.

@import “~bootstrap-vue/node_modules/bootstrap/scss/bootstrap.scss”; @import ‘~bootstrap-vue/src/index.scss’;

ktscript on Jun 20, 2022

As described on the Getting Started page, you need to import bootstrap/scss/bootstrap.scss and bootstrap-vue/src/index.scss into a single scss file, and then import this single file your main.js.

https://bootstrap-vue.org/docs#using-module-bundlers

Place all of the SCSS @imports into a single SCSS file, and import that single file into your project. Importing individual SCSS files into your project will not share variable values and functions between files by default.

This is what worked for me. Thank you!!

kbala97 on Mar 6, 2021

I figure multiple people will land on this because doing npm install bootstrap will now install Bootstrap 5 by default given that it released out of beta a few days ago. So to solve this run npm install bootstrap@4.5.3 instead, to specifically install the latest version of Bootstrap that BootstrapVue supports.

I install last version 4 (currently bootstrap@4.6.2). It’s work for me. Thanks

Samuel-silva on Apr 20, 2023

I landed here on the exact same error, after some mussing around I found out that I had installed bootstrap v5 instead of the (current, supported) v4. Just, you know, check for that as well.

I’m using Vue 2 and thanks to his answer, I saw that my Bootstrap was to version 5. So you need to downgrade Bootstrap to version 4 also I downgraded the sass-loader to 10.1.1 but this was recommended by my teacher… 🤷🏽‍♀️so I don’t know why I have to downgrade sass-loader for, but at least you can try it IF you have downgraded Bootstrap to 4 and it still doesn’t work.

Good Luck 👩🏽‍💻

osh91 on May 10, 2021