Angular 材质主题定制答案

【问题标题】：Angular Material Theme CustomizationAngular 材质主题定制
【发布时间】：2018-07-15 23:12:58
【问题描述】：

我正在尝试修改具有 Angular 6 且使用 Angular Material 6.3.3 的项目的主题

目前，我只是从 Material 站点复制代码并按照步骤操作，但是当我尝试运行 ng serve 时弹出错误。

**ERROR** in ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)
Module build failed: Syntax Error

(118:13) Missed semicolon

116 | // We use display: flex on this element exclusively for centering connected overlays.
117 | // When not centering, a top/left/bottom/right will be set which overrides the normal

118 | // flex layout.
| ^
119 | display: flex;
120 |

ℹ ｢wdm｣: Failed to compile.

我的 theme.scss 文件如下所示：

@import '~@angular/material/_theming.scss';

@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent: mat-palette($mat-blue, 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);

【问题讨论】：

发布出错的文件：./src/styles.css。

标签： angular angular-material angular-material2 angular-material-theming

【解决方案1】：

我发现解决方案是将您的项目完全切换到 SCSS 或仅使用 CSS。 Angular Materials 的文档基本上假设您使用的是 SCSS，因此所有内容都需要使用它在 SCSS 中设置样式的项目生成。

因此，总而言之，您要么一直使用 CSS，要么在创建项目时执行 ng new --style=scss

【讨论】：

【解决方案2】：

我认为你导入了错误的东西，应该是：

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

【讨论】：

那个不可用，现在在@angular/material文件夹下只能找到_theming.scss。我认为这个变化是从 5.2.5 到 6.3.3
_theming 应该解析为 theming。这就是 SCSS 的工作原理。
我发现解决方案是将您的项目完全切换到 SCSS 或仅使用 CSS。 Angular Materials 的文档基本上假设您使用的是 SCSS，因此所有内容都需要使用它在 SCSS 中设置样式的项目生成。