How to enable CSS Preprocessor SASS/SCSS in Angular 6

To enable CSS Preprocessor SASS/SCSS in Angular 6 project, we have update the config file (angular.json) or we can do it by Angular-CLI

By default, if we run ng new project-name using terminal/cmd, the angular framework will be installed without enabling CSS Preprocessors in angular. To overcome this, follow the simple procedure shared below

Scenario 1: ( Enabling SASS/SCSS in existing Angular project )
Using Angular-CLI

• ng config schematics.@schematics/angular:component.styleext scss  

Manually

1. Open angular.json file 
2. Find "schematics": {} 
3. Add "@schematics/angular:component": { "styleext": "scss" }  

After enabling CSS Preprocessor, just do following steps

1. Update all .css files to .scss (style.css in src folder and all custom generated components etc..)
2. Open angular.json file 
3. Update all "src/styles.css" to "src/styles.scss" Stop the server and restart.. All set to go with SCSS. 

Scenario 2: ( Enabling SASS/SCSS in new Angular project )
Using Angular-CLI 
Add --style=sass with the command to create new angular project ng new project-name --style=sass