Angular 11升级至16后样式表导入错误解决咨询

核心问题分析 #

1. Angular 16适配Webpack 5，已废弃~前缀解析node_modules依赖的写法，旧导入语句@import '~bootstrap/scss/functions';不再生效
2. 你的node_modules中存在bootstrap4/bootstrap5文件夹，说明安装的是分版本命名的Bootstrap包（而非官方标准的bootstrap包）

解决方案 #

方案1：直接修正导入路径 #

根据你实际使用的Bootstrap版本，修改src/styles.scss中的导入语句：

• 若使用Bootstrap 4：

  @import 'bootstrap4/scss/functions';
  

• 若使用Bootstrap 5：

  @import 'bootstrap5/scss/functions';
  

方案2：统一官方Bootstrap版本（推荐） #

如果项目不需要同时兼容两个Bootstrap版本，建议切换到官方标准包，避免路径混乱：

1. 卸载非官方版本：

   # 卸载Bootstrap 4（若使用5则执行此命令）
   npm uninstall bootstrap4
   # 卸载Bootstrap 5（若使用4则执行此命令）
   npm uninstall bootstrap5
   

2. 安装官方指定版本：

   # 安装Bootstrap 4最新稳定版
   npm install bootstrap@4 --save
   # 或安装Bootstrap 5最新稳定版
   npm install bootstrap@5 --save
   

3. 修改导入语句（无需~前缀）：

   @import 'bootstrap/scss/functions';
   

方案3：配置Sass路径别名（多版本兼容场景） #

若必须同时使用Bootstrap 4和5，可通过angular.json配置路径简化导入：

1. 打开angular.json，找到项目编译配置块，添加stylePreprocessorOptions：

   "projects": {
     "你的项目名称": {
       "architect": {
         "build": {
           "options": {
             "stylePreprocessorOptions": {
               "includePaths": [
                 "node_modules/bootstrap4/scss",
                 "node_modules/bootstrap5/scss"
               ]
             }
           }
         }
       }
     }
   }
   

2. 在styles.scss中直接导入对应文件：

   // 导入Bootstrap4的functions
   @import 'functions';
   // 导入Bootstrap5的functions（需确保文件名不冲突，或手动指定路径）
   @import 'bootstrap5/functions';
   

额外检查项 #

• 查看package.json的dependencies，确认Bootstrap包名是否为官方标准的bootstrap，避免使用非官方的bootstrap4/bootstrap5包
• 升级后若还有其他Sass导入报错，需同步移除所有~前缀

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