无法在Angular 4中使用自定义主题 [英] Not able to use a custom theme in Angular 4

问题描述

我正在尝试在我的角度项目中使用自定义主题.它没有按预期运行，出现以下错误:

I'm trying to use my custom theme in my angular project. It's not working as expected, I get the following error:

./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文件:

My styles.css file:

@import "custom_theme.scss"

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

我的custom_theme.scss文件:

My custom_theme.scss file:

@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

.angular-cli.json

      "styles": [
    "styles.css",
    "custom_theme.scss"
  ],

提前谢谢！

推荐答案

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

You can remove the @import "custom_theme.scss" from your styles.css. Since you have added the custom_theme.scss to your angular-cli.json (or angular.json for v6+) the import is not required.

编辑angular.json文件后，您将需要再次运行ng-serve.

After editing the angular.json file, you will need to run ng-serve again.

根据官方文档:

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

If you are using the Angular CLI, support for compiling Sass to css is built-in; you only have to add a new entry to the "styles" list in angular-cli.json pointing to the theme file (e.g., unicorn-app-theme.scss).

这篇关于无法在Angular 4中使用自定义主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！