Angular CLI SASS options

Question

I'm new to Angular and I'm coming from the Ember community. Trying to use the new Angular-CLI based off of Ember-CLI.

I need to know the best way to handle SASS in a new Angular project. I tried using the ember-cli-sass repo to see if it would play along since a number of core components of the Angular-CLI are run off of Ember-CLI modules.

It didnt work but than again not sure if I just misconfigured something.

Also, what is the best way to organize styles in a new Angular project? It would be nice to have the sass file in the same folder as the component.

Answer 1

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

Answer 2

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

Answer 3

ng set --global defaults.styleExt=scss is deprecated since ng6. You will get this message:

get/set have been deprecated in favor of the config command

You should use:

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

If you want to target a specific project (replace {project} with your project's name):

ng config projects.{project}.schematics.@schematics/angular:component '{ styleext: "scss"}'

Answer 4

Set it as Global Default

ng set defaults.styleExt=scss --global

Answer 5

CSS Preprocessor integration Angular CLI supports all major CSS preprocessors:

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

@Component({
  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.

Based on angular documentation https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Answer 6

When you are creating your project with angular cli try this:

ng new My_New_Project --style=sass 

This generating all your components with predifined sass files.

If you want scss syntax create your project with :

ng new My_New_Project --style=scss

If you are changing your existing style in your project

ng set defaults.styleExt scss

Cli handles the rest of it.

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