时间戳

首页 > 解决方案 > Angular 6 Material 检索材质颜色

css - Angular 6 Material 检索材质颜色

问题描述

"@angular/material": "^6.2.1" 被一个非常小的问题卡住了。无法在我的任何应用程序的 css/scss 文件中导入任何标准材质颜色，包括styles.scss

例子：

$app-panel-green: mat-color($mat-green);

在任何 scss 文件中都会出现此错误：

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed: 
$app-panel-green: mat-color($mat-green);
                           ^
      Undefined variable: "$mat-green".
      in /**********/src/styles.scss (line 1, column 29)

styles.scss 仅包含（之前除外）：

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
/*@import './theme.scss';*/

body { margin: 0; }

和预建的主题工作得很好。我什至不需要自定义主题，只想使用材质调色板。

标签： cssangularsassangular-material2

解决方案

如果要使用默认调色板之一，可以这样做：

@import '~@angular/material/theming'; // Pay attention on the path
@include mat-core();
$candy-app-primary: mat-palette($mat-deep-orange);
$candy-app-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);

并且不要忘记在您的主题中包含该文件.angular-cli.json到styles部分。

推荐阅读