升级到Angular Material 12后scss文件无法编译问题求助

1. 修复样式表找不到的核心问题 #

你直接执行sass amber.scss amber.css时，原生Sass CLI默认不会自动加载node_modules目录的模块，也不支持Angular CLI默认的~别名前缀，才会触发找不到样式表的报错。
不需要手动写多层相对路径，编译时添加--load-path参数指定node_modules路径即可：

sass --load-path=node_modules amber.scss amber.css

修改后就可以直接使用官方要求的引入写法：

@use '@angular/material' as mat;

注意：Angular 12+ 官方已经不推荐在样式路径前加~前缀

2. 修复mat相关函数未定义问题 #

你之前手动写相对路径引入@angular/material/theming时，引入范围和命名空间映射不对才会找不到define-palette方法。按上述步骤修正引入方式和编译参数后，直接调用mat.define-palette即可正常识别，所有Angular Material 12新增的主题函数、预设调色板都会正常加载。

额外校验项 #

• 确认你全局/项目局部安装的Sass版本确实是1.42.1，Angular Material 12要求Sass版本≥1.33.0，你的版本符合要求
• 如果是通过Angular CLI构建项目，不需要手动执行Sass命令，Angular CLI会自动处理样式加载路径，你只需要保证angular.json里的stylePreprocessorOptions没有配置错误的加载路径即可。

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