Angular 12升级至15后构建报错，求排查方向

可能的遗漏操作及对应解决方法 #

1. 检查Bootstrap版本兼容性 #

Angular 15建议搭配Bootstrap 5.x版本使用，若你之前用的是Bootstrap 4.x，大概率会出现语法或路径不兼容的问题：

• 卸载旧版本：npm uninstall bootstrap
• 安装兼容版本：npm install bootstrap@5

2. 配置stylePreprocessorOptions解析路径 #

Angular 12+之后，SCSS导入不再自动识别node_modules路径，需要在angular.json里明确配置路径，让编译器能找到Bootstrap的SCSS文件：
打开angular.json，找到对应项目的build→options→stylePreprocessorOptions，添加includePaths：

"stylePreprocessorOptions": {
  "includePaths": [
    "./node_modules/bootstrap/scss"
  ]
}

配置完成后，原导入语句@import "bootstrap/scss/functions";就能被正确解析，也可以简化为@import "functions";。

3. 确认SCSS导入顺序 #

Bootstrap的SCSS文件有依赖关系，functions必须在其他Bootstrap组件之前导入，确保你的styles.scss里导入顺序正确，示例：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
// 后续其他Bootstrap组件导入...

4. 清理缓存后重新构建 #

升级后可能残留缓存导致报错，执行以下命令彻底清理后重新构建：

• 删除依赖和锁文件并重新安装：rm -rf node_modules package-lock.json && npm install
• 清理Angular缓存：ng cache clean
• 重新构建项目：ng build

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