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",
    }
    


Although it generated compiler errors.
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