CODEWITHSUNDEEP
htmlcsstwitter-bootstrapangular
esseara
esseara

Reputation: 880

Angular won't load styles.css


I'm building a simple angular app with bootstrap. It seems that the base index.html won't load the styles.css. If I put the css code right into html tags it works like a charm. I tried to reboot the app and clear the browser cache, it seems to just ignore the style file. When I wrote the css file for the first time it worked, hence I thought that was a cache problem. I changed nothing of the Angular project base structure.
Here's my code.

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;
}

Here's the version that works instead.
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]

The code is pretty trivial but still.
Thanks in advance.

Upvotes: 8

Views: 23572

Answers (3)

Hareesh
Hareesh

Reputation: 6900

Check your angular-cli.json, under "apps" you should see something like this

"styles": [
    "styles.css"
  ]

add it if its not there

Upvotes: 5

tom
tom

Reputation: 740

You need to reference your stylesheet in yout .angular-cli.json like this :

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

Upvotes: 2

Ondra Koupil
Ondra Koupil

Reputation: 1073

Well, in your index.html, I don't see any <link> to that file... are you sure you didn't leave it out? You still need to link the stylesheet, Angular won't do that automatically for you.

Try:

<!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>

Upvotes: 0

Related Questions