Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

200
Views
Angular CLI SASS options

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.

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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"
    }
}
over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report

0

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
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!