即使文件存在，Angular 2 也看不到文件（使用 Angular-cli）答案

【问题标题】：Angular 2 doesn't see the file even if it is exist (using Angular-cli)即使文件存在，Angular 2 也看不到文件（使用 Angular-cli）
【发布时间】：2017-04-02 10:36:24
【问题描述】：

实际上我得到了一个样式表： <link href="../node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet"> 该文件存在，Webstorm 也在目录中看到该文件，但不知何故 Angular2 无法加载它。

错误：GET http://localhost:4200/node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css

如何让 Angular2 加载该文件？ 感谢您提供更多信息。

根看起来像：

-主文件夹

--node_modules

---东西

--src

---index.html

---styles.css

编辑在mithunvp.com/angular-material-2-angular-cli-webpack/ 上有使用提示

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

打开预建主题。但是再一次，即使它被粘贴在styles.css 中，它也会返回它找不到它的错误。它甚至找不到Material图标，这是一个链接......

【问题讨论】：

@DanielA.White Web 服务器是什么意思？
什么是驱动端口 4200？
@DanielA.White ng 在 Angular 2 中服务

标签： javascript angular angular-cli

【解决方案1】：

你不应该尝试这样加载 css，当你有 sccs 源文件时更是如此。

使用angular-cli，我可以想象你有文件src/styles.scss 或.less 对吗？（除非你决定使用纯 CSS ？！）。

因此，如果您使用的是 sass，请在 src/styles.scss 中输入：
@import '~@angular/material/core/theming/prebuilt/indigo-pink.css';

另外，我可以想象你想要做什么，如果你还没有看过 Kara 的 angular-material 演示，我建议你看看：https://www.youtube.com/watch?v=0q9FOeEELPY

【讨论】：

我正在做那部电影中的所有事情，但不知何故 Angular2 无法找到这些文件。她在电影中的 4:00 做这件事，一切都对她有用，但我的 Angular2 找不到这些文件。 @import '~https://fonts.googleapis.com/icon?family=Material+Icons'; @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
已修复。谢谢你
你做了什么来解决这个问题？

【解决方案2】：

若要解决此问题，请从 index.html 中内联 styles.css 并将其添加到 angular-cli.json 中的 style Array like

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "styles.css"
  ],

希望。它会工作

【讨论】：

【解决方案3】：

你应该使用以下语句

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

而不是

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

在styles.css内。

【讨论】：