Angular 2 看不到该文件，即使它存在（使用 Angular-cli）

Question

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

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

如何让 Angular2 加载该文件？ 感谢您提供任何进一步的信息。

根看起来像：

-主文件夹

--node_modules

---东西

--来源

---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 中，它也会 returns 错误，它无法找到它。它甚至找不到 Material 图标，这是一个 link...

Answer 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

Answer 2

要解决此问题，请从 index.html 内联 styles.css 并将其添加到样式下的 angular-cli.json 中数组如

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

希望。它会起作用

Answer 3

你应该使用下面的语句

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

而不是

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

在 styles.css.

里面

Angular 2 看不到该文件，即使它存在（使用 Angular-cli）

Angular 2 doesn't see the file even if it is exist (using Angular-cli)

javascript

angular-cli

angular