Angular - 升级到 v12 后无法访问 Material 主题功能

Question

我刚刚将 Angular 项目升级到最新版本（使用 Angular 材质的中型项目）。 尝试构建它时，我从多个组件的 scss 文件中收到以下错误。

./src/app/layout/navbar/navbar.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
  ╷
7 │     color: mt.get-color-from-palette(theme.$foreground, inverted);
  │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\app\layout\navbar\navbar.component.scss 7:12  root stylesheet

奇怪的是，在检查有问题的文件中的导入时，我得到以下信息：

// navbar.component.scss
@use '~@angular/material' as mat; // Ctrl + click -> path inaccessible
@use '../../../theme/goscan-theme' as theme; // Ctrl + click -> opens the file
@use '~@angular/material/theming' as mt; // Ctrl + click -> opens the file 

已安装的依赖项：

"@angular/animations": "~12.0.2",
"@angular/cdk": "~12.0.2",
"@angular/common": "~12.0.2",
"@angular/compiler": "~12.0.2",
"@angular/core": "~12.0.2",
"@angular/forms": "~12.0.2",
"@angular/localize": "^12.0.2",
"@angular/material": "^12.0.2",
"@angular/platform-browser": "~12.0.2",
"@angular/platform-browser-dynamic": "~12.0.2",
"@angular/router": "~12.0.2",
...

我已经按照solution 修复了一些构建错误，但我无法通过这个。有什么想法吗？

Answer 1

每https://material.angular.io/guide/theming#reading-hues-from-palettes

在您的情况下，您需要使用mat.get-color-from-palette（而不是mt.get-color-from-palette），因为get-color-from-palette 函数位于'~@angular/material' 包中。