未声明的 mixin mat-core Angular-material-theme for custom-theme.scss

Question

我终于能够更新我的 Angular 项目的所有 npm 包依赖项。这样做之后，我现在留下了下面的错误。当我将鼠标悬停在 Visual Studiomat-core上angular-material-theme时，它们显示为未声明的 mixins。感谢任何和所有的帮助。谢谢你！

./src/custom-theme.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: no mixin named mat-core
        on line 10 of src/custom-theme.scss
>> @include mat-core();
   ---------^

    at processResult (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\webpack\lib\NormalModule.js:703:19)
    at C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\webpack\lib\NormalModule.js:809:5
    at C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.callback (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\sass-loader\dist\index.js:54:7)
    at Object.done [as callback] (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\neo-async\async.js:8069:18)
    at options.error (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\node-sass\lib\index.js:294:32)

我的 package.json 如下

{
  "name": "royal_competition",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:production": "ng build --prod",
    "build:ssr": "ng run royal_competition:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.0.0",
    "@angular/cdk": "12.0.4",
    "@angular/common": "^12.0.0",
    "@angular/compiler": "12.0.3",
    "@angular/compiler-cli": "12.0.3",
    "@angular/core": "^12.0.3",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "^12.0.0",
    "@angular/material": "12.0.4",
    "@angular/platform-browser": "12.0.3",
    "@angular/platform-browser-dynamic": "12.0.3",
    "@angular/platform-server": "12.0.3",
    "@angular/router": "11.0.9",
    "@nguniversal/module-map-ngfactory-loader": "8.2.6",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.3.1",
    "core-js": "^3.14.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "oidc-client": "^1.9.1",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.3",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.0.3",
    "@angular/cli": "12.0.3",
    "@angular/language-service": "11.0.9",
    "@types/googlemaps": "^3.43.3",
    "@types/jasmine": "~3.4.4",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~12.11.6",
    "codelyzer": "^5.2.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^6.3.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "typescript": "^4.2.4"
  },
  "optionalDependencies": {
    "node-sass": "^4.12.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0"
  }
}

这是自定义主题.scss

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$royal_competition-primary: mat-palette($mat-indigo);
$royal_competition-accent: mat-palette($mat-amber, A200, A100, A400);

// The warn palette is optional (defaults to red).
$royal_competition-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$royal_competition-theme: mat-light-theme($royal_competition-primary, $royal_competition-accent, $royal_competition-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($royal_competition-theme);

Answer 1

核心 mixin Angular Material 定义了一个名为 core 的 mixin，其中包括多个组件使用的通用功能的先决条件样式，例如波纹。即使您定义了多个主题，核心 mixin 也必须在您的应用程序中包含一次。多次包含核心 mixin 会导致应用程序中出现重复的 CSS。

@use '@angular/material' as mat;

@include mat.core();

Answer 2

从 Angular Material 12 开始，它现在mat.core()取代了mat-core().

其他包含的内容也一样。

通常从 CLI 运行 Angular Material 升级命令应该已经为您更新了。