无法在Angular 4中使用自定义主题

Question

无法在Angular 4中使用自定义主题

4

我正在尝试在我的Angular项目中使用自定义主题。但是它没有按照预期工作，我收到了以下错误：

./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/custom_theme.scss
Module not found: Error: Can't resolve '@angular/material/theming' in '/Users/mathiasschrooten/Downloads/skylux-admin/src'

我的 styles.css 文件:

@import "custom_theme.scss"

.mat-tab-label {
  flex: 1 1 auto;
}

我的custom_theme.scss文件：

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-orange);
$candy-app-accent:  mat-palette($mat-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": [
    "styles.css",
    "custom_theme.scss"
  ],

提前感谢您！

- Mathias Schrooten

@MathijsSegers 我执行了 'npm install --save @angular/material @angular/cdk' 和 'npm install --save @angular/animations'。我应该导入其他东西吗？根据文档，这应该就是全部了，对吧？ - Mathias Schrooten

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Doye · Accepted Answer

您可以从您的 styles.css 中删除 @import "custom_theme.scss"。因为您已经将 custom_theme.scss 添加到了您的 angular-cli.json（或者对于v6+版本是 angular.json），所以不需要再进行导入。

在编辑完 angular.json 文件之后，您需要再次运行 ng-serve。 根据官方文档的说法：

如果您正在使用 Angular CLI，则支持将 Sass 编译为 css 是内置的；您只需要在 angular-cli.json 的 "styles" 列表中添加一个指向主题文件（例如 unicorn-app-theme.scss）的新条目即可。