具有sass样式的Angular 4.4.4项目：材料设计设置不起作用

Question

使用解决方案查看最终编辑

我已按照本指南（评论中的链接）在我的角度4项目中实施材料组件和图标。

当我尝试使用以下行在我的scss配置文件中导入材质设计时遇到并出现错误：

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

IntelliJ警告我：＆＃34;找不到网址......等等＃34;

现在我使用直接在desider html文件中导入的解决方法 带有此链接的材料中的图标：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

但是像这样教程中所做的所有步骤都没用。

任何人都可以对我说我做错了吗？提前致谢

编辑1 已按要求删除了~：

我对angular2项目结构不太熟练（我的前端同事得了流感）。

我问自己将这两行放在哪里，因为我无法在我的项目中找到全局style.css

最终编辑

从一开始就按照文档教程进行操作。

我解决了创建一个客户主题的问题，因为材料需要一个主题来启动组件。

对于图标 - ＆gt;只需将链接导入到index.html。

对于组件 - ＆gt;按照＆＃34; get started＆＃34;部分文件

Answer 1

从网址中删除前导~：它是node_modules/的网络包简写。

这就是为什么他们在角度/材质的以下行中使用它：它被重写为node_modules/@angular/material/prebuilt-themes/indigo-pink.css。

编辑：

您可以按照工具提示添加它（进入设置＆gt; DTD并在此处将其添加为URI）：

Answer 2

您可以禁用IDE下载的检查。你可以看到如何做到这一点

  

Disabling and Enabling Inspections

     

禁用或启用检查禁用或启用检查   在“设置/首选项”对话框中

Find the desired inspection, by expanding the grouping nodes or using the search field.

     

     

  
• 使用检查旁边的复选框禁用或启用它。
  
• 应用更改并关闭对话框。
  

IJ使用检查来验证代码是否存在已知错误的方法 IDE将检查下载到您的个人资料中。当代码使用新功能时，检查并不总能给出正确的结果。通过这种方式，您应该更新IDE或下载/修改/禁止/禁用检查。 CSS的代码不需要编译，它由您的应用程序中的webpack或其他打包程序进行转换。