CODEWITHSUNDEEP
angularsassangular-cli
t3__rry
t3__rry

Reputation: 2849

Angular CLI: generate SASS project from existing project

I've began working on an Angular CLI generated project and realized I forgot the --style=sassflag. Is there any way to convert my project to enable SASS with the Angular CLI?

Upvotes: 6

Views: 5425

Answers (4)

Anjum....
Anjum....

Reputation: 4204

In Angular 6+ if you are getting console warning after doing ng config defaults.styleExt = scss such as below is because of single dashes are not supported anymore

Schema validation failed with the following errors:
 Data path "" should NOT have additional properties(defaults).

You can run below command to change schematics 

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

You need to do two manual changes

  • Rename .css file to .scss in the root folder
  • Update angular.json file with "styles": ["src/styles.scss"],

Upvotes: 12

Maks K
Maks K

Reputation: 3914

In angular cli 6 this is depracated

ng set defaults.styleExt scss

You should use this

ng config defaults.styleExt = scss

Upvotes: 8

MostafaMashayekhi
MostafaMashayekhi

Reputation: 29009

you can set the default style on an existing project

ng set defaults.styleExt scss

and in angular-cli.json file change style.css to style.scss 

"apps":[{
  "styles":[
     "styles.scss"
   ]
}]

Upvotes: 10

Roman Kolesnikov
Roman Kolesnikov

Reputation: 12147

just rename existing css files (if any) to sass and add this to angular-cli.json:

"defaults": {
    .....
    "styleExt": "sass"
}

also look at app/styles section in this file - you should rename filenames here too

Upvotes: 2

Related Questions