Angular 12项目升级Bootstrap 4.6到5.1时SCSS文件缺失报错如何解决

报错原因 #

该报错是Bootstrap 5.x对SCSS模块架构做了重构导致的：你之前在Bootstrap 4.6.0中使用的四个导入文件，要么被重命名、要么被合并、要么被正式移除，因此升级到5.1.3后找不到对应文件。

解决方案 #

你可以根据自己的使用场景二选一：

• 场景1：全量导入Bootstrap样式（最简单，无额外兼容问题）
  直接删除现有的4条SCSS导入语句，替换为全量导入语句即可：

  @import "~bootstrap/scss/bootstrap";
  

  该语句会自动引入所有Bootstrap SCSS模块，不需要单独维护导入路径，适配成本最低。

• 场景2：需要按需导入减少打包体积
  按照以下规则调整每个导入语句：

  1. 直接删除@import "~bootstrap/scss/custom-forms";：Bootstrap 5已废弃独立的自定义表单模块，所有表单相关样式已整合到forms系列模块中，无需单独导入。
  2. 直接删除@import "~bootstrap/scss/media";：Bootstrap 5已完全移除media组件，官方推荐使用Flex工具类实现同等布局效果；如果需要兼容旧业务代码，可以手动将Bootstrap 4.6版本中的media.scss拷贝到项目目录下自行导入。
  3. 将@import "~bootstrap/scss/input-group";修改为：

     @import "~bootstrap/scss/forms/input-group";
     

     注意按需导入时需要先引入forms的基础依赖模块（如form-control等），否则会出现样式缺失。
  4. 将@import "~bootstrap/scss/print";修改为：

     @import "~bootstrap/scss/utilities/print";
     

修改完成后重新启动Angular开发服务，清除缓存重新编译即可解决文件不存在的报错。如果后续出现样式错乱或组件功能异常，可以对照Bootstrap官方迁移文档调整业务代码中的类名和调用逻辑。

内容的提问来源于stack exchange，提问作者s.alhaj