Angular CLI: generate SASS project from existing p

问题:

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?

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

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

回答3:

In angular cli 6 this is depracated

ng set defaults.styleExt scss

You should use this

ng config defaults.styleExt = scss

回答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