Angular

Question

我刚刚将 Angular 项目升级到最新版本（具有 Angular Material 的中型项目）。尝试构建它时，我从多个组件的 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",
...

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

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' 包中。

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

Angular - Can't access Material theming functions after upgrade to v12

typescript

angular-material