34

Apparently the way to declare the default stylesheet extension changed from Angular 6 onwards. The styleExt property in the angular.json is not recognised any longer.

For new projects this can be set with an option on the CLI --style=scss on the new command.

However, how do you change this for exsting projects that I migrate from Angular <5 or if you forgot to do this during project creation?

This question is meant to be strictly related to the breaking changes by the version 5 to 6 of Angular.

veben
  • 19,637
  • 14
  • 60
  • 80
Daniel Lerps
  • 5,256
  • 3
  • 23
  • 33
  • Possible duplicate of [Angular-cli from css to scss](https://stackoverflow.com/questions/40726081/angular-cli-from-css-to-scss) – T04435 Jul 03 '18 at 15:47
  • @T04435 I don't see how this is a duplicate. I clearly state that this question is about a specific version change in Angular which is not part of the other question at all. Just because parts of the revised answeres also apply here doesn't make the questions the same. – Daniel Lerps Jul 04 '18 at 08:08

2 Answers2

92

The position on which this is set changed in the angular.json. There are 2 ways to set this option now.

Via the Angular CLI:

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

Directly in the angular.json:

"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
}

Angular 9 Update:

Note that from Angular 9 onwards styleext is renamed to style. So we end up with:

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

and

"schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
}
Daniel Lerps
  • 5,256
  • 3
  • 23
  • 33
  • When I tried this, I still had the global styles.css still as a css file, so I couldn't take advantage of the scss interpretation. If I tried renaming to styles.scss (and updated the references in angular.json the build broke. – Michael Coxon Jul 01 '18 at 00:56
  • @MichaelCoxon The template setting is only defining which stylesheet type will be generated for new components. It does not have any efect on existing ones. Especially not the global `styles.css`. Not sure if you can use SCSS in that one. – Daniel Lerps Jul 02 '18 at 07:59
  • 4
    To use the global `styles.scss` you need to change the reference elsewhere in the angular.json. Look at `projects.project-name.architect.build.styles` and `projects.project-name.test.styles` . Change the value to point to `styles.scss` instead of `styles.css` For an already created project don't forget to change the actual files. – JeffryHouser Jul 03 '18 at 21:48
  • How to use a separate global.scss in this rather than style.css "defaultProject": "pareo", "schematics": { "@schematics/angular:component": { "prefix": "app", "styleext": "scss", "styles": [ "src/app/provider-portal/provider-portal.scss" ] }, "@schematics/angular:directive": { "prefix": "app" } } – juhi Jun 03 '20 at 04:03
  • 1
    As per this closed ticket https://github.com/ngrx/platform/issues/2248 with new version of Angular CLI `styleExt` has been replaced with `style` - I tested it in two libraries that are using Angular anf Angular CLI versions 8. – codeepic Jul 07 '20 at 23:00
4

To go from css to scss for an existing project, follow these steps:

In angular.json file

  1. In build part and in test part, replace:

    "styles": ["src/styles.css"], by "styles": ["src/styles.scss"],

  2. Replace:

    "schematics": {}, by "schematics": { "@schematics/angular:component": { "style": "scss" } },

Using ng config schematics.@schematics/angular:component.styleext scss command works but it does not place the configuration in the same place.

In your project rename your .css files to .scss

veben
  • 19,637
  • 14
  • 60
  • 80