在Angular的Sass文件中使用@use '@angular/material'导致构建失败求助

1. 排查Sass语法解析错误 #

针对初始报错Unterminated string token，尽管你的代码看似正常，但Sass对格式细节敏感：

• 统一使用空格缩进，禁止混合制表符与空格
• 检查@use '@angular/material' as mat行末尾是否存在隐藏特殊字符（如异常换行符）
• 尝试将导入语句的单引号改为双引号：@use "@angular/material" as mat，部分环境下单引号可能触发解析bug

2. 修复MDC依赖缺失/损坏问题 #

针对深层报错SassError: Can't find stylesheet to import，这是Angular Material依赖的Material Design Components (MDC) 包出现异常导致的：

• 删除本地node_modules文件夹、package-lock.json（或yarn.lock）文件
• 重新安装所有依赖：

  npm install
  # 若使用yarn则执行
  yarn install
  

• 强制版本匹配：打开package.json，确保@angular/core与@angular/material的主版本号完全一致（例如两者均为16.x.x，不能跨主版本混用）

3. 优化导入范围，避免全量引入 #

全量导入@angular/material易引发依赖冲突，建议仅导入所需的elevation模块：

@use '@angular/material/core/elevation' as mat-elevation

调用时修改为：

.category-card:hover
  @include mat-elevation.elevation(9)
  cursor: pointer

4. 校验Angular CLI样式配置 #

确认angular.json的build.options.styles数组中已包含Angular Material预构建主题：

"styles": [
  "@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.sass"
]

内容的提问来源于stack exchange，提问作者Michał Bieńkowski