Using scss as default style sheet in Angular 6+ (styleExt)

Question

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.

Congelation

Possible duplicate of Angular-cli from css to scss – Pyrophosphate

@Pyrophosphate 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. – Congelation

Answer 1

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

Congelation

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. – Perak

@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. – Congelation

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. – Yser

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" } } – Fossorial

As per this closed ticket 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. – Mendymene

Answer 2

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

Giffie