Angular与Bootstrap升级后SCSS文件导入报错求助

报错根源 #

你的问题核心是Angular版本升级后移除了SCSS导入时的~前缀支持，同时Bootstrap相关依赖的版本升级进一步触发了路径解析问题：

• Angular从14升级到16的过程中，Angular CLI彻底放弃了webpack时代的~前缀解析逻辑——这个前缀原本用于告诉构建工具从node_modules目录查找依赖，新版本CLI默认会自动扫描node_modules，但不再识别~前缀，导致原导入语句无法定位文件。
• 你提到的Bootstrap版本从13.0.0到15.0.1应该是指ng-bootstrap（Angular封装的Bootstrap组件库）的版本升级，虽然核心CSS文件路径变动不大，但版本升级后依赖的安装结构可能有细微调整，加剧了路径解析失败的问题。

相对路径方案的弊端 #

你用深层相对路径临时解决问题的方式可以运行，但绝非最佳实践：

• 路径层级过深（../../../../../），一旦文件所在目录移动（比如组件重构、目录结构调整），导入语句会立即失效，维护成本极高。
• 代码可读性差，其他开发者接手时需要花费额外时间梳理路径逻辑。

正确解决方案 #

方案1：直接移除~前缀（推荐） #

Angular CLI新版本会自动从node_modules目录查找SCSS依赖，只需去掉~即可：

@import 'bootswatch/dist/materia/variables';
// Override Bootstrap variables
@import 'bootstrap-variables';
// Import Bootstrap source files from node_modules
@import 'bootstrap/scss/bootstrap';
@import 'bootswatch/dist/materia/bootswatch';

如果仍报错，检查angular.json中build.options.stylePreprocessorOptions是否存在异常配置（默认无需额外设置，除非自定义了目录结构）。

方案2：配置includePaths简化导入 #

若希望进一步精简导入语句，可以在angular.json的构建配置中添加includePaths，指定常用依赖的目录：

"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "options": {
          "stylePreprocessorOptions": {
            "includePaths": [
              "node_modules/bootstrap/scss",
              "node_modules/bootswatch/dist/materia"
            ]
          }
        }
      }
    }
  }
}

配置完成后，导入语句可简化为：

@import 'variables';
// Override Bootstrap variables
@import 'bootstrap-variables';
@import 'bootstrap';
@import 'bootswatch';

报错触发的具体环节 #

报错主要由Angular 16升级导致：Angular从14版本开始逐步弃用~前缀的SCSS导入方式，到16版本完全移除了该解析逻辑，原有的~导入语句无法被正确解析，从而触发文件找不到的错误。Bootstrap/ng-bootstrap的版本升级只是次要因素，核心是Angular构建工具的行为变更。

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