Question

我正在使用angular构建一个简单的bootstrap应用。基数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]

代码非常简单，但仍然存在提前谢谢。

Answer 1

你需要在你的.angular-cli.json中引用样式表，如下所示：

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

Answer 2

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

"styles": [
    "styles.css"
  ]

如果不存在则添加

Answer 3

好吧，在你的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>

Angular不会加载styles.css

3 个答案: