Angular 2 - Global CSS file

Solution 1:

Just write your global styles in your src/styles.css file. That file will be added to styles.bundle.js when you run ng build.

If you'd like to add more style files, you can do so in your .angular-cli.json (or angular.json for Angular 6+) file. In that file you'll see an array called styles, with a single item by default which is styles.css (or src/styles.css in Angular 6). You can even include .scss files.

Using SCSS

If you want to use SCSS, simply change the extension of your src/styles.css file to .scss, then reflect the change in your .angular-cli.json (or angular.json in 6+) file as well, by editing the entry in the styles array.

Make Angular use SCSS by default

When creating components, you'd like Angular to create .scss styles files instead of .css. Here's how:

Angular 7

Starting from Angular 7, when you create an app with ng new appname, you will be prompted which stylesheet format you'd like to use, so you just choose SCSS (source). It seems like here ends the need to manually configure Angular to use SCSS.

Angular 6

Add this at the end of your angular.json file (source):

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

Angular 4 and lower

Locate this by the end of your .angular-cli.json file, and change the value of styleExt to scss:

"defaults": {
  "styleExt": "css",
  "component": {}
}

Solution 2:

You can simply import the css in the main html file.

Solution 3:

You can use:

1. Add main.css
2. Open styles.css in main folder
3. Add this line (@import 'main.css';)