Angular CLI SASS options

Solution 1:

Angular CLI version 9 (used to create Angular 9 projects) now picks up style from schematics instead of styleext. Use the command like this:
ng config schematics.@schematics/angular:component.style scss
and the resulting angular.json shall look like this

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

Other possible solutions & explanations:

To create a new project with angular CLI with sass support, try this:

ng new My_New_Project --style=scss 

You can also use --style=sass & if you don't know the difference, read this short & easy article and if you still don't know, just go with scss & keep learning.

If you have an angular 5 project, use this command to update the config for your project.

ng set defaults.styleExt scss

For Latest Versions

For Angular 6 to set new style on existing project with CLI:

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

Or Directly into angular.json:

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

Solution 2:

Update for Angular 6+

1. New Projects

   When generating a new project with Angular CLI, specify the css pre-processor as

   • Use SCSS syntax

     ng new sassy-project --style=scss
     

   • Use SASS syntax

     ng new sassy-project --style=sass
     

2. Updating existing project

   Set default style on an existing project by running

   • Use SCSS syntax

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

   • Use SASS syntax

     ng config schematics.@schematics/angular:component.styleext sass
     

   The above command will update your workspace file (angular.json) with

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

   where styleext can be either scss or sass as per the choice.

Original Answer (for Angular < 6)

New projects

For new projects we can set the options --style=sass or --style=scss according to the desired flavor SASS/SCSS

• Use SASS syntax

  ng new project --style=sass 
  

• Use SCSS syntax

  ng new project --style=scss 
  

then install node-sass,

npm install node-sass --save-dev

Updating existing projects

To make angular-cli to compile sass files with node-sass, I had to run,

npm install node-sass --save-dev 

which installs node-sass. Then

• for SASS syntax

  ng set defaults.styleExt sass
  

• for SCSS syntax

  ng set defaults.styleExt scss
  

to set the default styleExt to sass

(or)

change styleExt to sass or scss for desired syntax in .angular-cli.json,

• for SASS syntax

  "defaults": {
       "styleExt": "sass",
  }
  

• for SCSS syntax

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

ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles 

which was fixed by changing the lines of .angular-cli.json,

"styles": [
        "styles.css"
      ],

to either,

• for SASS syntax

  "styles": [
          "styles.sass"
        ],
  

• for SCSS syntax

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

Solution 3:

Quoted from Officials github repo here -

To use one just install for example

npm install node-sass

and rename .css files in your project to .scss or .sass. They will be compiled automatically. The Angular2App's options argument has sassCompiler, lessCompiler, stylusCompiler and compassCompiler options that are passed directly to their respective CSS preprocessors.

See here

• https://github.com/angular/angular-cli/wiki/stories-css-preprocessors