Angular won't load styles.css

Question

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.

if you are using angular CLI, you have to mention the path in styles array under .angular-cli.json. — JEET ADHIKARI
– JEET ADHIKARI, Commented Jul 28, 2017 at 14:23
I did that, I will update the question with the content of .angular-cli.json — esseara
– esseara, Commented Jul 28, 2017 at 14:25

Hareesh · Accepted Answer · 2017-07-28 14:26:33Z

5

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

"styles": [
    "styles.css"
  ]

add it if its not there

answered Jul 28, 2017 at 14:26

Hareesh

6,9005 gold badges36 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tom · Accepted Answer · 2017-07-28 14:26:27Z

2

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

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

answered Jul 28, 2017 at 14:26

tom

7405 silver badges20 bronze badges

Comments

Ondra Koupil · Accepted Answer · 2017-07-28 14:20:46Z

0

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>

answered Jul 28, 2017 at 14:20

Ondra Koupil

1,0816 silver badges11 bronze badges

1 Comment

FAISAL Over a year ago

(-1 for the answer): Angular does it automatically if you are using angular-cli. You just have to specify the styles file path in the angular-cli.json

Collectives™ on Stack Overflow

Angular won't load styles.css

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related