无法在 Angular 4 中使用自定义主题 [英] Not able to use a custom theme in Angular 4
问题描述
我正在尝试在我的 angular 项目中使用我的自定义主题.它没有按预期工作,我收到以下错误:
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
(或 angular.json
for v6+),因此不需要导入.
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屋!