Angular不会加载styles.css答案

【问题标题】：Angular won't load styles.cssAngular不会加载styles.css
【发布时间】：2018-01-04 15:48:21
【问题描述】：

我正在使用bootstrap 构建一个简单的angular 应用程序。似乎基础index.html 不会加载styles.css。如果我将 css 代码直接放入 html 标签中，它就像一个魅力。我试图重新启动应用程序并清除浏览器缓存，它似乎只是忽略了样式文件。当我第一次编写 css 文件时它工作，因此我认为这是一个缓存问题。我没有改变 Angular 项目的基础结构。
这是我的代码。

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ReagApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <div class="container">
    <app-root></app-root>
  </div>
</body>
</html>

styles.css

body {
  background-color: #d9d9d9;
}

.container{
  width: 70%;
  max-width: 100%;
    background-color: white;
    margin-left: auto;
  margin-right: auto;
}

以下是适用的版本。
index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ReagApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body style="  background-color: #d9d9d9;">
  <div class="container"
      style="width: 70%;
      max-width: 100%;
        background-color: white;
        margin-left: auto;
      margin-right: auto;">
    <app-root></app-root>
  </div>
</body>
</html>

.angular-cli.json

[other things]
    "prefix": "app",
          "styles": [
            "styles.css",
            "../node_modules/bootstrap/dist/css/bootstrap.min.css",
            "../node_modules/font-awesome/css/font-awesome.css"
          ],
          "scripts": [
            "../node_modules/jquery/dist/jquery.min.js",
            "../node_modules/tether/dist/js/tether.min.js",
            "../node_modules/bootstrap/dist/js/bootstrap.min.js"
          ],
          "environmentSource": "environments/environment.ts",
[other things]

代码很简单，但仍然如此。
提前致谢。

【问题讨论】：

您使用什么来构建您的应用程序？角-cli？
如果你使用 Angular CLI，你必须在 .angular-cli.json 下的样式数组中提及路径。
我做到了，我会用 .angular-cli.json 的内容更新问题
你的文件夹结构中的style.css在哪里？
@DeborahK 在 index.html, src/app 的同一文件夹中。

标签： html css twitter-bootstrap angular

【解决方案1】：

嗯，在您的 index.html 中，我没有看到该文件的任何 <link>...您确定没有将其遗漏吗？您仍然需要链接样式表，Angular 不会自动为您完成。

试试：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ReagApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <app-root></app-root>
  </div>
</body>
</html>

【讨论】：

（答案为-1）：如果您使用 angular-cli，Angular 会自动执行此操作。您只需在 angular-cli.json 中指定样式文件路径

【解决方案2】：

你需要像这样在你的 .angular-cli.json 中引用你的样式表：

"styles": [
"path/to/style.css"
],

【讨论】：

【解决方案3】：

检查您的angular-cli.json，在"apps" 下您应该会看到类似这样的内容

"styles": [
    "styles.css"
  ]

如果不存在就添加它

【讨论】：