35 lines (27 sloc) 1010 Bytes

CSS Preprocessor integration

Angular CLI supports all major CSS preprocessors:

To use these preprocessors simply add the file to your component's styleUrls:

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {
  title = 'app works!';

When generating a new project you can also define which extension you want for style files:

ng new sassy-project --style=sass

Or set the default style on an existing project:

ng config schematics.@schematics/angular:component.styleext scss
# note: @schematics/angular is the default schematic for the Angular CLI

Style strings added to the @Component.styles array must be written in CSS because the CLI cannot apply a pre-processor to inline styles.