Angular项目升级Bootstrap5.1.1后hover等mixin未定义报错如何解决

Bootstrap 5 已全面移除 v4 版本内置的全局hover mixin，该mixin原本用于统一封装hover状态的兼容处理逻辑，v5 重构了伪类相关的mixin体系后不再对外导出该方法。你项目中存在的@include hover调用大概率来自旧版本自定义样式、或是还未适配Bootstrap 5的第三方Angular UI组件，因此编译时会抛出未定义mixin的报错。

• 方案1：替换原有mixin调用
  排查项目中所有自定义SCSS代码，将@include hover的写法直接替换为原生伪类写法即可：

  // 旧写法
  @include hover {
    color: $color;
    background-color: $focus-background;
    border-color: $focus-border;
  }
  
  // 新写法
  &:hover {
    color: $color;
    background-color: $focus-background;
    border-color: $focus-border;
  }
  

  如果需要保留移动端触摸场景下的hover兼容逻辑，也可以替换为Bootstrap 5 官方提供的media-hover、hover-focus等替代mixin。

• 方案2：全局补全mixin定义
  如果项目中大量使用了hover mixin，逐个修改成本过高，可以在全局公共SCSS入口文件中手动补全该mixin的定义，兼容旧逻辑无需修改原有业务代码：

  @mixin hover {
    &:hover {
      @content;
    }
  }
  

• 方案3：升级第三方依赖
  如果排查后发现报错来源是项目引入的Angular UI组件库（如ng-bootstrap、ngx-bootstrap等），则需要将对应UI库升级到适配Bootstrap 5的版本，即可解决版本不兼容带来的mixin缺失问题。

内容的提问来源于stack exchange，提问作者Nalin Kularathna