cannot load styles in angular cli new project

Question

I have just created a new project using angulari cli.

When I try to include styles.css file in index.html

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

I receive this in Chrome's dev tools network tab:

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

Any idea on how to fix this? I am running locally using ng serve

I also try adding

./styles.css
/styles.css
styles.css

Answer 1

when we create angular-cli project styles.css will apply default which you can see in .angular-cli.json as

app: {
styles:[
  "styles.css"
]

}

here you can add more styles if you needed based on your project.

Answer 2

I just noticed that it is loaded automatically through some server requests for js files. So it is loading the styles through javascript.

Answer 3

For the new version angular cli, you no longer have to include the following lines

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

in the index.html file. The cli will inject the contents automatically. So remove that line from the index.html and all should work.

if you need style.css just declare it in angular-cli.json as follows

 "styles": [
        "styles.scss",
      ],