参数`$ color`的'opacity（$ color）`必须是一种颜色

Question

我正在尝试创建Angular 2主题，我按照网站上提到的教程进行操作。这是我的主题文件。

@import '~@angular/material/theming';

@include mat-core();
$primary: mat-palette($mat-deep-purple);
$accent:  mat-palette($mat-amber, A200);
$theme: mat-light-theme($primary, $accent);

@include angular-material-theme($theme);

.m2app-dark {
  $dark-primary: mat-palette($mat-blue, A800);
  $dark-accent:  mat-palette($mat-light-blue, A8008);
  $dark-warn:    mat-palette($mat-orange, A200);
  $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
  @include angular-material-theme($dark-theme);
}

在构建时我正在接受以下操作

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/app-theme.scss
Module build failed:
undefined
                                ^
      Argument `$color` of `opacity($color)` must be a color

Backtrace:
        node_modules/@angular/material/_theming.scss:1119, in function `opacity`
        node_modules/@angular/material/_theming.scss:1119, in function `if`
        node_modules/@angular/material/_theming.scss:1119, in function `mat-color`
        node_modules/@angular/material/_theming.scss:1508, in mixin `mat-option-theme`
        node_modules/@angular/material/_theming.scss:3798, in mixin `mat-core-theme`
        node_modules/@angular/material/_theming.scss:3848, in mixin `angular-material-theme`
        stdin:15
      in C:\my-data\code\xenia\xenia-ui\node_modules\@angular\material\_theming.scss (line 1119, column 34)
Error:
undefined
                                ^
      Argument `$color` of `opacity($color)` must be a color

Backtrace:
        node_modules/@angular/material/_theming.scss:1119, in function `opacity`
        node_modules/@angular/material/_theming.scss:1119, in function `if`
        node_modules/@angular/material/_theming.scss:1119, in function `mat-color`
        node_modules/@angular/material/_theming.scss:1508, in mixin `mat-option-theme`
        node_modules/@angular/material/_theming.scss:3798, in mixin `mat-core-theme`
        node_modules/@angular/material/_theming.scss:3848, in mixin `angular-material-theme`
        stdin:15
      in C:\my-data\code\xenia\xenia-ui\node_modules\@angular\material\_theming.scss (line 1119, column 34)
    at options.error (C:\my-data\code\xenia\xenia-ui\node_modules\node-sass\lib\index.js:291:26)
 @ ./src/app-theme.scss 4:14-190
 @ multi ./src/styles.css ./src/app-theme.scss

请让我知道我做错了什么。谢谢

Answer 1

您传递的第二个选项也应该是颜色代码。不同的颜色有不同的颜色代码，任何随机数都不起作用。完整列表可在此处找到 - https://material.io/design/color/#tools-for-picking-colors

所以在你的情况下，这两个都应该有效：

$dark-primary: mat-palette($mat-blue, A700);
$dark-primary: mat-palette($mat-blue, 800);

因为这两种都是公认的阴影

Answer 2

我认为问题在于这一行

$primary: mat-palette($mat-deep-purple);

将其替换为以下行：

$primary: mat-palette($mat-deep-purple,A100);