Let's add Sass styles to our Angular project. We will configure our application to use Sass and automatically compile it to CSS and reload our application using live-reload:

1. With sass-loader already available and ready to be used in our Angular-CLI project, we just need to configure Angular to look for .scss files in our project's build, instead of normal CSS files. We can do this using Angular-CLI's set command:

ng set defaults.styleExt scss

2. Next, we must update our Angular-CLI configuration to define that we want to use this new Sass file extension for our build, instead of our previous CSS file extension. To update your configuration to use Sass for your global styles file, you must edit your styles configuration in your .angular-cli.json file:

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

3. By changing this value to styles.scss, sass-loader will automatically identify it as Sass to be precompiled and delivered as CSS in our application. We will also have to make a similar adjustment to any CSS style file definitions within our components. For example, our app.component.ts file has a CSS file reference that must be updated:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Hello World!';
}

4. Here, we will update our styleUrls to ./app.component.scss so that our Sass file will be loaded when we load this component. This pattern of only loading our styles when a component is invoked is known as component styles, and it offers some unique advantages in Angular over other web application frameworks that we will explore later in this chapter.
5. With our configurations updated, we will need to rename our style files to .scss extensions so that they can be found by the Angular-CLI build:

mv ./src/styles.css ./src/styles.scss
mv ./src/app/app.component.css ./src/app/app.component.scss

6. After changing any configuration in Angular-CLI, we must manually restart the built in web-server for configuration changes to be used in our application.