title: Angular won't load styles.css
body: <p><br>
  I'm building a simple <code>angular</code> app with <code>bootstrap</code>. It seems that the base <code>index.html</code> won't load the <code>styles.css</code>. 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.<br>
  Here's my code.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;ReagApp&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;app-root&gt;&lt;/app-root&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>styles.css</strong></p>
  
  <pre><code>body {
    background-color: #d9d9d9;
  }
  
  .container{
    width: 70%;
    max-width: 100%;
      background-color: white;
      margin-left: auto;
    margin-right: auto;
  }
  </code></pre>
  
  <p>Here's the version that works instead.<br>
  <strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;ReagApp&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body style="  background-color: #d9d9d9;"&gt;
    &lt;div class="container"
        style="width: 70%;
        max-width: 100%;
          background-color: white;
          margin-left: auto;
        margin-right: auto;"&gt;
      &lt;app-root&gt;&lt;/app-root&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>.angular-cli.json</strong></p>
  
  <pre><code>[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]
  </code></pre>
  
  <p>The code is pretty trivial but still.<br>
  Thanks in advance.</p>