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

时间:2017-12-13 09:41:59

标签: angular sass angular-material2

我正在尝试在我的角度项目中使用我的自定义主题。它没有按预期工作,我收到以下错误:

./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"
  ],

提前致谢!

1 个答案:

答案 0 :(得分:7)

您可以从@import "custom_theme.scss"中删除styles.css。由于您已将custom_theme.scss添加到angular-cli.json(或angular.json for v6 +),因此不需要导入。

修改angular.json文件后,您需要再次运行ng-serve

根据official docs

  

如果您使用的是Angular CLI,则支持将Sass编译为css   内置;你只需要在“样式”列表中添加一个新条目   angular-cli.json指向主题文件(例如,   麒麟-APP-theme.scss)。