Angular 2 Material 自定义主题 [英] Angular 2 Material Custom Themes
问题描述
我将 Angular 2 与 Angular Material 一起使用,我需要创建一个自定义主题,以便为组件使用自定义颜色.我遵循了 angular docs,但我无法让它运行.
I am using Angular 2 with Angular Material and I need to create a custom theme, in order to use custom colors for components. I followed the angular docs, but I can´t get it running.
到目前为止我做了什么:
What I did so far:
1.我创建了一个文件 my-theme.scss:
1.I created a file my-theme.scss:
@import "../node_module/@angular/material/_theming";
@include mat-core();
$my-theme-primary: mat-palette($mat-amber);
$my-theme-accent: mat-palette($mat-orange, A200, A100, A400);
$my-theme-warn: mat-palette($mat-red);
$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);
@include angular-material-theme($my-theme);
2.我将创建的SASS文件导入styles.css
2.I imported the created SASS file into styles.css
@import "my-theme.scss"
3.我在样式部分的 .angular-cli.json 文件中引用了它:
3.I referenced it in the .angular-cli.json file in the styles section:
"styles": [
"styles.css",
"my-theme.scss"
]
我在 localhost 下的网站告诉我找不到编译失败"模块:'../node_modules/@angular/material/_theming'.
My website under localhost tells me "compilation failed" module not found: '../node_modules/@angular/material/_theming'.
我尝试了几种导入路径的变体(~@angular/material/_theming"、../node_modules/@angular/material/_theming"、~@angular/material/theming"、../node_modules/@angular/material/theming"...) 在 my-theme.scss 文件中.在 Angular Docs 中,他们使用主题化"作为位置,但我在某处读到,Angular Material 将文件转移到_theming",我也在我的文件夹结构中找到了它.
I tried several variations of the import path ("~@angular/material/_theming", "../node_modules/@angular/material/_theming", "~@angular/material/theming", "../node_modules/@angular/material/theming"...) in my-theme.scss file. In the Angular Docs they use "theming" as location, but I read somewhere, that Angular Material shiftet the file to "_theming", which I also found in my foulder structure.
当我使用路径../node_modules/@angular/material/_theming.scss"时,编译器找到了该文件,但由于另一个错误导致编译失败:
When I use the path "../node_modules/@angular/material/_theming.scss" the compiler finds the file, but the compilation failes due to another error:
Module build failed: Missed semicolon (30:1)
28 | // Media queries
29 | // TODO: Find a way to respect media query ranges.
> 30 | // TODO: For example the xs-breakpoint should not interfere with the sm-breakpoint.
| ^
31 | $mat-xsmall: 'max-width: 600px';
32 | $mat-small: 'max-width: 960px';
这对我来说似乎很奇怪,因为 _theming.scss 文件是一个 Angular Material 文件,错误的位置是一个注释.此外,我在网络上的其他工作实现中也没有看到任何以 .scss 结尾的导入语句.
This seems weird to me, because the _theming.scss file is an Angular Material file and the position of the error is a comment. Also I didn´t see any import statement ending with .scss in other working implementations on the web.
我花了几个小时搜索如何将自定义主题添加到我的网站...我错过了什么吗?我是 Angular 2 和 SASS 的新手.
I spent hours searching how to add custom theming to my website... Did I miss something? I am quite new to Angular 2 and SASS.
PS:我已经有点困惑了,我是否应该将 my-theme.scss 导入到 style.css 中.Angular Docs 对此只字未提,但我读到了一些评论,人们说这解决了自定义 Angular Material 主题的问题.
PS: I am already a bit confused, if I should import my-theme.scss into styles.css or not. The Angular Docs dont say a word about it, but I read some comments, where people state, that this fixed their problems with custom Angular Material themes.
项目结构:
my-project
|--node_modules
| |--@angular
| |--material
| |--prebuild-themes
| |--_theming.scss
|--src
| |--app
| | |--my-component.css | html | ts
| | |--app.module.ts
| |--assets
| |--index.html
| |--main.ts
| |--my-theme.scss
| |--styles.css
|--.angular-cli.json
package.json 文件:
The package.json file:
"dependencies": {
"@angular/animations": "^4.3.1",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.2.1",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
Windows 7,64 位火狐 52.2.1可视化工作室代码 1.14.1
Windows 7, 64 Bit Firefox 52.2.1 Visual Studio Code 1.14.1
推荐答案
这会有所帮助:
- 将您的主题文件名更改为
_my-theme.scss
- 将您的
styles.css
更改为styles.scss
将您的主题导入到
styles.scss
文件中,例如:
- Change your theme file name to
_my-theme.scss
- Change your
styles.css
tostyles.scss
Import your theme into the
styles.scss
file like:
@import './path/to/your/theme/my-theme';//你不需要下划线和文件在这里扩展
@import './path/to/your/theme/my-theme'; // You dont need the underscore and file extention here
你不需要在 styles: []
这篇关于Angular 2 Material 自定义主题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!