Angular CLI：从现有项目生成SASS项目

Question

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

Answer 1

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

Answer 2

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

Answer 3

In angular cli 6 this is depracated

ng set defaults.styleExt scss

You should use this

ng config defaults.styleExt = scss

Answer 4

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