Angular Material多主题：Sass Map属性始终返回旧缓存值

可能的原因 #

• Sass自身缓存残留：Angular CLI缓存和Sass编译器缓存相互独立，Sass会在本地生成.sass-cache目录，或通过系统级缓存存储编译结果，这些缓存不会被Angular的缓存清理命令影响。
• 主题定义未同步更新：检查主题配置文件，确认foreground下的secondary-text已修改为新值，且该文件被正确导入到使用theme mixin的模块中，不存在旧主题变量的引用。
• 浏览器缓存：浏览器可能缓存了旧CSS资源，尤其是生产环境构建的文件，需强制刷新页面（Ctrl+Shift+R/Cmd+Shift+R），或在开发者工具中临时禁用缓存。
• 构建产物残留：未完全清理旧的dist构建目录，新构建时复用了旧编译文件，导致旧值残留。
• 第三方依赖缓存：若主题依赖Angular Material默认变量，需确认是否更新了Angular Material版本，或是否有第三方库硬编码了旧颜色值。

可清理的其他缓存 #

• Sass本地缓存：
  • 手动删除项目根目录下的.sass-cache文件夹（若存在）。
  • Dart Sass的系统级缓存目录：
    • Windows：%LOCALAPPDATA%\dart-sass\cache
    • macOS/Linux：~/.cache/dart-sass
      删除该目录下的所有缓存文件。
• 构建产物缓存：执行ng build --clean，或手动删除项目根目录的dist文件夹。
• Node模块缓存：执行npm cache clean --force（或yarn cache clean），随后重新安装依赖（npm install/yarn install）。
• IDE缓存：重启IDE，或执行IDE的重载操作（如VS Code按Ctrl+Shift+P选择"Reload Window"）。

额外排查步骤 #

• 在theme mixin中添加@debug $theme，查看传入的主题Map是否包含最新颜色值，定位问题出在主题传递环节还是缓存。
• 启动开发服务时禁用Angular构建缓存：ng serve --no-cache，验证是否能获取新值。
• 检查是否存在多个主题文件同时导入的情况，导致旧主题变量覆盖新配置。

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