Bootstrap 5 hover hover-focus hover-focus-active not working

Question

recently I upgraded my angular app from bootstrap 4.5 to 5.1.1 by editing package.json file.

"dependencies": {
"bootstrap": "5.1.1"...

I faced below issue after upgrading.

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
7  │ ┌   @include hover {
8  │ │     color: $color;
9  │ │     background-color: $focus-background;
10 │ │     border-color: $focus-border;
11 │ └   }

Any idea?

Answer 1

Issue was hover hover-focus hover-focus-active mixins deprecated in bootstrap 4 and remove in bootstrap 5. So if you are using those need to initialize the start of the file you are using them.

https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/scss/mixins/_hover.scss

@mixin hover-focus-active() {
&:hover,
&:focus,
&:active {
@content;
}
}

@mixin bmd-hover-focus-active {
// add the .active to the whole mix of hover-focus-active
&.active {
  @content;
}
@include hover-focus-active() {
  @content;
}
}

like that define the all mixins