Angular集成Bootstrap遇node_modules报错，求助修复方案

先解决最可能的「误修改依赖文件」问题 #

既然你怀疑是误拖文件导致node_modules里的vendor/_bootstrap-grid.scss出问题，那最直接的修复方式就是彻底重置依赖：

• 先删掉整个node_modules文件夹：

  # macOS/Linux
  rm -rf node_modules
  # Windows命令行
  rmdir /s /q node_modules
  # Windows PowerShell
  Remove-Item -Recurse -Force node_modules
  

• 删掉依赖锁定文件，避免缓存的旧版本干扰：

  rm package-lock.json
  

• 重新拉取干净的依赖：

  npm install
  

这一步能把被误改的依赖文件完全恢复成官方版本，绝大多数这类问题都能解决。

如果重置依赖没用，检查项目的Bootstrap引入方式 #

有时候是项目里的SCSS导入路径写错了，导致指向了Bootstrap内部的私有文件：

• 找到项目里导入Bootstrap样式的地方（一般是src/styles.scss或者组件的SCSS文件），确认导入的是官方推荐的入口：
  正确的栅格导入应该是：

  @import "~bootstrap/scss/bootstrap-grid";
  

  别直接去引用node_modules里的vendor/_bootstrap-grid.scss——那是Bootstrap内部的拆分文件，不是给外部直接用的。

清理Angular CLI缓存试试 #

Angular CLI可能缓存了旧的编译结果，导致报错一直存在：

ng cache clean --all

之后再重新启动服务：

ng serve

最后排查版本兼容性 #

如果上面的步骤都没解决，可能是Bootstrap和Angular版本不匹配：

• 打开package.json看看Bootstrap的版本，比如Angular 16+建议搭配Bootstrap 5.x，旧版Bootstrap可能会有SCSS语法和Angular编译工具不兼容的问题。
• 可以尝试升级到兼容的版本，比如：

  npm install bootstrap@5.3.2
  

小提醒：以后尽量别手动修改node_modules里的文件，这些文件会在npm install时被覆盖，而且容易引入不可控的问题。如果要自定义Bootstrap样式，建议通过创建自定义变量文件来覆盖默认值，而不是直接改依赖包内的代码。

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