Undefined variable problem in _variables.scss file

[canperk]

I have upgraded my bootstap-vue package from rc-16 to rc-27 but i got an error Undefined variable : $alert-bg-level in _variables.scss

Am i missing something?

[tmorehouse]

I am guessing you are using the source SCSS files, and using a module bundler, such as webpack.

BootstrapVue uses Bootstrap V4.3. SCSS variables, mixins, and function to generate it's final CSS ( so that the colors and breakpoints align with Boootstrap's.

It sounds like you are importing Bootstrap CSS (or SCSS) separately from BootstrapVue.

When using the source SCSS You should make sure you are importing the SCSS files in a single "custom.scss" (or app.scss) file, then import that into your app. Order of import is important.

Importing multiple SCSS files into your app will not share the SASS variables, mixins and functions across the SCSS files.

Create a single SCSS file:

// custom.scss (or app.scss)
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

and then in your app:

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';

import '/path/to/custom.scss';

Vue.use(BootstrapVue);

See:

• https://bootstrap-vue.js.org/docs#using-module-bundlers
• https://bootstrap-vue.js.org/docs/reference/theming

[Hari-CTL]

If I do a custom.scss import, I get an error saying

"This dependency was not found:"