Question

我正在使用Angular Material库作为界面在Angular 5中开发一个Web应用程序。

"@angular/animations": "^5.2.11",
"@angular/cdk": "^5.2.0",
"@angular/common": "~5.2.6",
"@angular/compiler": "~5.2.6",
"@angular/core": "~5.2.6",
"@angular/forms": "~5.2.6",
"@angular/http": "~5.2.6",
"@angular/material": "^5.2.0",
"@angular/platform-browser": "~5.2.6",
"@angular/platform-browser-dynamic": "~5.2.6",

我尝试了添加CSS的不同方法

添加 <link rel="stylesheet" href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css">到index.html文件

添加以下内容

"styles": [
  "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"    
]

到.angular.cli.json

在src文件夹中创建一个styles.scss文件，添加这些文件

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

但是这根本不起作用，控制台会显示消息

that:core.es5.js:139 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

Answer 1

将style.scss文件添加到样式：[]数组中，然后在将其导入到scss文件中时从样式数组中删除"../node_modules/@angular/material/prebuilt-themes/indigo-pink.css",。

即

"styles": [ 
"../node_modules/@angular/material/prebuilt-themes/indigo-pink.css", // remove this line
"styles.scss" //add this line 
]

Answer 2

在 src / styles.css

中

放置 @import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

无论如何，src文件夹中都应该有一个style.css文件，为什么要手动创建它？

Angular 5 CLI无法加载材质样式

2 个答案: