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

Question

我已按照本指南（cmets 中的链接）在我的 Angular 4 项目中实现材质组件和图标。

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

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

IntelliJ 提醒我：“找不到 URL...等”

现在我正在使用一种解决方法，直接在需要的 HTML 文件中导入 带有此链接的材料中的图标：

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

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

谁能告诉我我哪里做错了？

编辑 1 按要求删除了~：

我对angular2项目结构不是很熟练（我的前端同事感冒了）。

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

最终编辑

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

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

对于图标-> 只需将链接导入放在 index.html 中。

对于组件-> 遵循文档中的“get started”部分

Answer 1

从 URL 中删除前导 ~：它是 node_modules/ 的 webpack 简写。

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

编辑：

您可以按照工具提示添加它（进入 Settings > 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 或应用程序中的其他打包程序进行转译。