升级Angular 17执行npm start时出现Sass样式表导入错误

问题分析 #

升级至Angular 17后执行npm start，Sass构建报错无法找到@angular/material/theming样式表，错误源于层级导入链：_shared.theme.scss → _app.theme.scss → styles.scss的导入路径解析失败。

修复步骤 #

1. 确认Angular Material包版本匹配 #

先检查当前安装的Angular Material版本是否与Angular 17兼容：

npm list @angular/material

若版本不匹配或包缺失，重新安装对应版本：

npm install @angular/material@17

2. 配置Sass预处理器路径 #

在angular.json中添加stylePreprocessorOptions，确保Sass能正确识别@angular/material的路径：
找到projects -> [你的项目名称] -> architect -> build -> options，添加以下配置：

"stylePreprocessorOptions": {
  "includePaths": [
    "./node_modules/@angular/material"
  ]
}

同时在architect -> serve -> options下同步添加上述配置，保证开发服务生效。

3. 修正导入语句路径 #

Angular 17中theming文件的实际路径为node_modules/@angular/material/core/theming/_theming.scss，若短路径导入失败，可尝试完整路径导入：

@import '@angular/material/core/theming';

确认导入语句无拼写错误，注意路径末尾无需加.scss后缀。

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

清理npm和Angular缓存，避免缓存导致的依赖问题：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
ng cache clean
npm start

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