Mime type error when adding a CSS file to Angular

Question

I'm trying to build a static site using Angular. What I want is to have some global css/js/image files to be added to the index.html

This is my code in index.html

<link rel="stylesheet" type="text/css" href="css/layers.css"> 

My css folder in in the same level as the index.html file

I'm getting this error for each stylesheet I added (from ng serve with chrome)

Refused to apply style from 'http://localhost:4200/css/layers.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I've tried adding this too

#.angular-cli.json "styles": [         "styles.css",         "css/layers.css"       ], 

How can I fix this?

My angular setup is

Angular CLI: 1.6.5 Node: 8.1.4 OS: darwin x64 Angular: 5.2.2 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router  @angular/cli: 1.6.5 @angular-devkit/build-optimizer: 0.0.42 @angular-devkit/core: 0.0.29 @angular-devkit/schematics: 0.0.52 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.9.5 @schematics/angular: 0.1.17 typescript: 2.5.3 webpack: 3.10.0 

Answer 1

Solution 1 (with Bootstrap installed)

All you need to do is:

1. Go to .angular-cli.json under the root directory of your angular app.

2. Modify the styles array to include bootstrap before styles.css

    "styles": [         "../node_modules/bootstrap/dist/css/bootstrap.min.css",         "styles.css"       ], 

Note: the path to bootstrap is relative to /src/index.html that's why you need "../" before node_modules.

3. Exit the current session of ng serve and start it again.

Here is an Awesome tutorial

Solution 2 (with Bootstrap referenced)

All you need to do is:

1. Go to styles.css under the root directory of your angular app.

2. Add this line at the top:

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css'); 

Here is Angular docs