How to add custom styles using Angular CLI

Question

I would like to add my own CSS to my new Angular CLI application ...

However, I am doing my best to make this work, and there is little that can be done to document how it works.

In the following image, I added my own stylesheet in the .angular-cli.json file like this:

"styles": [ "styles.css", "app/assets/css/styles.css" ], 

This, however, does not work ...

Please advise!

Answer 1

According to your folder structure, the correct path is assets/css/styles.css , so change it in the angular-cli.json file as shown below and check it out.

 "styles": [ "styles.css", "assets/css/styles.css" ], 

Answer 2

The easiest way to create a folder (in src/ ) is to call it styles/ place style.css in it (or SCSS and all other _variables.scss files), and then change angular-cli.json like this:

 "styles": [ "styles/styles.css" ] 

Answer 3

Is there a way to write "styles:" arrays inside a file such as environment.ts. So, does the application choose different styles depending on the environment?