为什么 Angular 不渲染我的 CSS？答案

【问题标题】：Why isn't Angular rendering my css?为什么 Angular 不渲染我的 CSS？
【发布时间】：2017-02-02 17:11:46
【问题描述】：

angular2-seed app 有一个问题，当我将其放入 index.html 时，它似乎无法呈现我的 css

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <base href="<%= APP_BASE %>">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><%= APP_TITLE %></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- inject:css -->
  <link rel="stylesheet" href="css/material.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <!-- endinject -->
</head>
<body>

<div class="mdl-badge">Hello</div>
<sd-app>
  <div class="mdl-spinner"></div>
</sd-app>

我指向 css 文件的正确路径，但是当我使用任何类时，它根本不会呈现
我尝试了 <link rel="stylesheet" href="../../node_modules/material-design-lite/material.css">，这不应该有任何区别，但得到了相同的结果

编辑

这是我的项目的样子，我已将css 和js 移至src，希望现在更清晰

非常感谢您的帮助。

【问题讨论】：

检查开发工具中的网络选项卡，它可能会出错
是的，我也这样做了，注意到我的 css 文件没有被加载，但我不明白为什么？
您是否检查了 angualr 与浏览器调试器一起正常工作？有时，如果角度生成错误，我会遇到 css 未加载
既然您已将文件移动到项目文件夹中，那么您在网络选项卡中遇到了什么错误？您也可以通过在浏览器地址栏中输入其假定的 URL 来访问 material.css 吗？
多么愚蠢的事情>。 `中，而我没有使用吞咽。将我的 css 引用移到注入之外，它工作正常

标签： javascript html css angular typescript

【解决方案1】：

这与 Angular 无关。 css/material.css 的路径一定不正确。

您需要在托管 Web 服务器的同一目录中拥有一个 /css 目录。因此，如果您的项目位于 /myproject 中，您需要有一个 /myproject/css 文件夹。

路径必须相对于您的根文件夹。如果不是，那么css/material.css 将不起作用，因为开头没有/ 正斜杠，根目录是相对当前文件夹。

正如 cmets 中提到的，您可以在浏览器的地址栏中输入确切的路径，以查看该 css 文件是否会加载。如果没有，则说明您遇到了路径问题。这很可能通过附加../ 向下移动目录或附加/ 使路径绝对指向Web 服务器的根目录来解决。

【讨论】：

我知道，正如我所说，我指向我的 css 文件的正确路径
@BishoAdam：但该路径在您的虚拟主机文件夹中吗？相对路径 ../../node_modules/... 很容易在外面。一个简单的检查方法是在地址栏中输入 css 的路径，看看它是否会获取它。