Angular 2 Material无法加载样式

Posted 2023-03-06

【中文标题】Angular 2 Material无法加载样式

【英文标题】：Angular 2 Material can't load style

【发布时间】：2017-10-04 11:06:26

【问题描述】：

我开始在 Angular 中使用 Angular Material 库为界面开发一个 Web 应用程序。但是在尝试导入预建主题时出现错误。为了导入它，我将<link rel="stylesheet" href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"> 添加到我的index.html 文件中，但是当我运行ng serve 时，我无法获取该文件。

【问题讨论】：

向我们展示您的项目文件结构。

您必须将../node_modules/@angular/material/prebuilt-themes/indigo-pink.css 添加到styles 文件中的.angular-cli.json

试过了，但也没用

我也遇到了同样的问题。我导入了材料文档中所述的样式，但没有任何颜色或样式通过。你知道如何解决这个问题吗？

各位，同样的问题你们能帮忙吗？

【参考方案1】：

检查您的路径是否正确。我有同样的问题，我修复了路径： 我的是

 <link rel="stylesheet" href="lib/@angular/material/core/theming/prebuilt/indigo-pink.css">

【讨论】：

我也遇到了同样的问题，你解决了吗？

【参考方案2】：

如果您使用的是angular-cli，请关注他们的steps for including Angular-Material。

确保您在 src/styles.css 中有以下导入

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

这与angular-material 在他们自己的Getting Started 网站上的建议略有不同，但它对我有用。

【参考方案3】：

如果您没有找到任何解决方案，只需再次添加角材料。它不会影响您的代码，但会添加 CSS。不要忘记重新启动 Angular 服务器。

ng add @angular/material

【讨论】：

当我再次运行时，问题还是一样，而且我无法在 src 文件夹下找到 style.css