Angular won't load styles.css

html css twitter-bootstrap angular

11,813

Solution 1

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

"styles": [
    "styles.css"
  ]

add it if its not there

Solution 2

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

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

11,813

Author by

esseara

Passionate coder based in Milan, Italy.

Updated on July 16, 2022

Comments

esseara almost 2 years

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.

Faisal almost 7 years

What are you using to build your app? angular-cli?
JEET ADHIKARI almost 7 years

if you are using angular CLI, you have to mention the path in styles array under .angular-cli.json.
esseara almost 7 years

I did that, I will update the question with the content of .angular-cli.json
DeborahK almost 7 years

Where in your folder structure is your styles.css?
esseara almost 7 years

@DeborahK in the same folder of index.html, src/app.

Faisal almost 7 years

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