Angular Material 3 自定义主题不起作用（Nx monorepo）

Question

我在 Nx 存储库中找到了这个 Angular 应用程序。 之后

npx nx run testapp:serve

我收到以下错误：

./src/app/shared/design/testapp.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined function.
   ╷
38 │ $testapp-primary: mat.define-palette($palette-testapp-blue);
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\app\shared\design\testapp.scss 38:16  root stylesheet

./src/app/shared/design/testapp.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined function.
   ╷
38 │ $testapp-primary: mat.define-palette($palette-testapp-blue);
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\app\shared\design\testapp.scss 38:16  root stylesheet

testapp.scss：

@use "@angular/material" as mat;

@include mat.core();

$palette-testapp-blue: (
  A100: #8897ba,
  A200: #5a698a,
  A400: #2e3f5d,
  contrast: (
    A100: rgb(96, 96, 96),
    A200: rgb(96, 96, 96),
    A400: rgb(96, 96, 96),
  ),
);

$palette-testapp-gold: (
  A100: #ffe5af,
  A200: #cfb37f,
  A400: #9d8452,
  contrast: (
    A100: rgb(96, 96, 96),
    A200: rgb(96, 96, 96),
    A400: rgb(96, 96, 96),
  ),
);

$palette-testapp-red: (
  A100: #ffafae,
  A200: #cf7f7f,
  A400: #9c5153,
  contrast: (
    A100: rgb(96, 96, 96),
    A200: rgb(96, 96, 96),
    A400: rgb(96, 96, 96),
  ),
);

$testapp-primary: mat.define-palette($palette-testapp-blue);
$testapp-accent: mat.define-palette($palette-testapp-gold);
$testapp-warn: mat.define-palette($palette-testapp-red);

$testapp-theme: mat.define-light-theme($testapp-primary, $testapp-accent, $testapp-warn);

@include mat.all-component-themes($testapp-theme);

项目.json：

...
"styles": [
    "src/styles.scss",
    "src/app/shared/design/testapp.scss"
],
...

包.json：

"dependencies": {
    "@angular/animations": "~18.1.2",
    "@angular/cdk": "^18.1.2",
    "@angular/common": "~18.1.2",
    "@angular/compiler": "~18.1.2",
    "@angular/core": "~18.1.2",
    "@angular/fire": "^18.0.1",
    "@angular/forms": "~18.1.2",
    "@angular/material": "^18.1.2",
    "@angular/platform-browser": "~18.1.2",
    "@angular/platform-browser-dynamic": "~18.1.2",
    "@angular/router": "~18.1.2",
    "rxjs": "~7.8.0",
        "tslib": "^2.3.0",
    "zone.js": "~0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~18.1.2",
    "@angular-devkit/core": "~18.1.2",
    "@angular-devkit/schematics": "~18.1.2",
    "@angular-eslint/eslint-plugin": "~18.1.0",
    "@angular-eslint/eslint-plugin-template": "~18.1.0",
    "@angular-eslint/template-parser": "~18.1.0",
    "@angular/cli": "~18.1.2",
    "@angular/compiler-cli": "~18.1.2",
    "@angular/language-service": "~18.1.2",
    "@nx/angular": "19.5.3",
    "@nx/workspace": "19.5.3",
    "@schematics/angular": "~18.1.2",
    "@types/jasmine": "~5.1.4",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "20.10.3",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~5.1.1",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "nx": "19.5.3",
    "protractor": "~7.0.0",
    "ts-node": "~10.9.2",
    "tslint": "~6.1.3",
    "typescript": "5.5.4"
}

Answer 1

mat.define-palette

和

mat.define-light-theme

均未定义，这就是您在构建中看到错误的原因。要生成具有自定义颜色的新 M3 主题，您可以使用

ng generate @angular/material:m3-theme

原理图。有关 M3 主题如何工作的更多信息，请参阅主题指南。

Answer 2

当使用材料 3 和角材料 18 时，他们改变了这一点。

要继续使用旧主题，您需要使用 m2- 函数：

$testapp-primary: mat.m2-define-palette($palette-testapp-blue);
$testapp-theme: mat.m2-define-light-theme((color: (primary: $testapp-primary,
                accent: $testapp-accent,
                warn: $testapp-warn,
            ),
            typography: $custom-typography,
            density: 0,
        ));

对于最新的主题，有几种不同的方法可以实现，但其中一种方法是：

$my-app-theme-md3: mat.define-theme((color: (
        theme-type: light, 
        use-system-variables: true
    ),
    typography: (
        use-system-variables: true
    ),
    density: (
        scale: 0
    ),
));

https://material.angular.io/guide/theming

使用系统变量构建自定义主题 https://themes.angular-material.dev/