Angular项目引入Bootstrap时出现SassError样式表导入失败求助

1. 确认依赖版本匹配 #

• @ng-bootstrap/ng-bootstrap 14.0.0必须搭配Bootstrap 5.2.x，先检查package.json中是否存在正确的依赖项：
  • 若缺失，执行安装命令：npm install bootstrap@5.2 sass --save
  • 确保package.json里bootstrap版本为5.2.x，sass版本为1.32+（Angular 15兼容版本）

2. 修正angular.json中的样式配置 #

打开项目根目录的angular.json，找到projects -> [你的项目名] -> architect -> build -> options -> styles数组，替换为正确的Bootstrap Sass路径：

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "src/styles.scss"
]

注意：必须导入Bootstrap的scss入口文件，而非.css文件，否则会触发Sass导入错误。

3. 检查组件内的Sass导入语句（如有） #

如果在组件的.scss文件中手动导入了Bootstrap样式，确保路径正确：

// 兼容写法
@import "~bootstrap/scss/bootstrap";

// 相对路径写法
@import "../node_modules/bootstrap/scss/bootstrap";

也可以在angular.json的build选项中配置自动识别node_modules路径：

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

配置后组件内只需写@import "bootstrap/scss/bootstrap";即可。

4. 清理缓存并重启项目 #

执行命令清理Angular缓存，避免缓存导致的路径识别异常：

ng cache clean

之后重启开发服务器：ng serve

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