更新Angular、Material及Bootstrap后执行ng serve时出现构建错误

你遇到的这个styles.scss模块构建失败问题，在Angular 5这类较老版本搭配Bootstrap 4时很常见，核心原因是sass相关加载器与现有Angular CLI版本不兼容。下面是具体的解决步骤：

步骤1：安装兼容的sass-loader和node-sass版本 #

Angular CLI 1.7.3对sass处理工具的版本有严格要求，过高的版本会直接触发构建报错。执行以下命令安装匹配的版本：

npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev

步骤2：清理依赖缓存并重装 #

旧的依赖缓存或损坏的包可能导致隐性冲突，按以下操作彻底清理：

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json文件（如果用yarn则删除yarn.lock）
• 重新安装所有依赖：

npm install

步骤3：检查styles.scss的Bootstrap导入语法 #

确保你在全局样式文件中正确导入Bootstrap，路径和语法没有错误，示例如下：

@import "~bootstrap/scss/bootstrap";

如果导入路径写错或存在多余的语法错误，也会触发加载器报错。

步骤4：验证Angular Material依赖完整性 #

你的Angular Material版本（5.1.1）和Angular 5.2.8是匹配的，但可以尝试重新安装确保依赖没有损坏：

npm install @angular/material@5.1.1 @angular/cdk@5.1.1 --save

完成以上步骤后，重新运行ng serve，应该就能解决这个模块构建错误了。

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