default angular-cli to generate sass files

Photo by Francisco Gomes

a popular way to generate a new angular component is to use angular cli with below command:

ng generate component my-comp

this generates my-app folder with all the supported files for a new angular component including a .css file for styling the component.

files generated for a new component by ng cli

being a huge fan of css preprocessors (specially sass), i want my component to have a sass file (.scss) instead of .css.

to do this, we need to change one configuration in .angular-cli.json file.

open .angular-cli.json file in your favourite editor and set defaults.styleExt to scss.

"defaults": {
    "styleExt": "scss",
     ....
}

now, if you run the same command to generate a new component, cli will generate sass file by default for your component.

*.scss file is generated by default

simple quick tip that can save some google search.