How to implement SCSS in angula 5 by using Angular CLI? [duplicate]

Question

I'm new to Angular and I'm coming from the Ember community. Trying to use the new Angular-CLI based on 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 didn't work but then 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

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

Answer 2

Update for Angular 6+

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
  

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.