How do I add Sass compilation in Angular CLI 6: angular.json?

Question

I just created a new Angular project using the new Angular CLI 6.0, but I need to add Sass compilation to my project. I'm aware you can set a flag when you create a project, but my project is already created and work has been done.

The new configuration file that gets generated with the new Angular CLI is now called angular.json rather than angular-cli.json. The scheme for the file is also different, with new properties.

In the old angular-cli.json there is a section where you can set the stylExt like so,

"defaults": {
    "styleExt": "scss"
}

but I'm not sure where exactly to put this, as after the "test" and "lint" properties, gives a lint error of:

Matches multiple schemas when only one must validate.

and building produces:

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

Looking at CLI's docs I'm not seeing anything that would indicate where to put "styleExt".

I've seen other answers advising: ng set defaults.styleExt scss which throwsget/set have been deprecated in favor of the config command..

I tried ng config set defaults.styleExt scss and npm config set defaults.styleExt scss with the former throwing an error and the latter apparently having no effect on the file, but without error.

I would create a new project using the the flag `--style=scss` and then just look at how the `angular.json` is set up in the generated project and then copy the `angular.json` in your application — Smokey Dawson, May 03 '18 at 23:22
@JuvenileSnow You know that's a pretty good idea, lol. Little things like this make me wonder if I'm even cut out to start an app to begin with. — Esten, May 05 '18 at 01:34

score 114 · Accepted Answer · edited Jul 25 '18 at 05:37

114

Doing exactly what Smokey Dawson commented,

"projects": {
  "angular-app": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {
      "@schematics/angular:component": {
        "styleext": "scss"
      }
    },
    "architect": {...}
  }
}

The above is the result. So in your app, under the key schematics, add a key @schematics/angular:component with the key styleext set to scss.

This should be applied to your angular.json file in the root directory of your project.

edited Jul 25 '18 at 05:37

Tim Diekmann

7,755
11
41
69

answered May 07 '18 at 00:58

Dico

1,296
1
9
8

7

And change `src/styles.css` references to `src/styles.scss` in `angular.json` – Markus Pscheidt May 24 '18 at 15:47
Yes, this does the trick. @Dico, do you have a link to a documentation for that "schematics" "styletext" topic please? – Herr_Hansen Jun 03 '18 at 09:40
1

@Herr_Hansen, it's "styleext" (style extension), not "styletext". https://github.com/angular/angular-cli/wiki/angular-workspace https://github.com/angular/angular-cli/blob/v6.0.0-rc.8/packages/%40angular/cli/lib/config/schema.json#L108-L112 – dubbha Jun 13 '18 at 09:27
2

[angular-workspace](https://github.com/angular/angular-cli/wiki/angular-workspace), [@schematics/angular:component](https://github.com/angular/angular-cli/blob/v6.0.0-rc.8/packages/%40angular/cli/lib/config/schema.json#L74-L144), [styleext](https://github.com/angular/angular-cli/blob/v6.0.0-rc.8/packages/%40angular/cli/lib/config/schema.json#L108-L112) – dubbha Jun 13 '18 at 10:27
1

I have SSR also, will this effect automatically at the time of build or I have to configure webpack build configuration for sass compilation? – Ethan.R Aug 01 '18 at 08:26
I had a flag in schematics already that I had to remove, otherwise components never generated any scss or css -it was: "inlineStyle": true, had to remove that – SeanMC Aug 11 '18 at 21:43
And restart your server when you are done. If you use `ng serve` then restart that. – P.Brian.Mackey Nov 04 '18 at 17:34

Mohamed Allal · Answer 2 · 2018-08-26T17:45:00.497

In Angular 6, It's more easier then that. The compilation is handled automatically! How that ? To use scss at components level you need to name the file with the extension scss (same go for less, styl). And in your component.ts you change the corresponding style to scss too.

Here a screenshoot from the doc:

And to use Scss at a globale scale (src/styles.css), then you need to change styles.css to styles.scss (same go for less, styl ...etc). And then you go on angular.json and change the old styles.css to the new styles.scss value. As shown in the image bellow:

Here the link for the doc for the first part for the ones that want to explore themselves: https://angular.io/guide/component-styles#non-css-style-files

Now what about setting up, ng-cli so when generating new component the extension will be by default scss ? Use the ng config command as follow:

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

That will update angular.json with:

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

Which is the equivalent to the old angular-cli.json

    defaults: {
        "styleext": "scss"
    }

That's for a project that is already started but not set to default to scss. If you are creating a new project then use the option --style to specify that as follow:

ng new my-project --style=scss

And you will not have to use the precedent command which is a config command that allow us to update the specified field in the angular.json file (because it will be already set).

But what do you do to see the generated css file? Do we need separate tooling? — Pankaj Shukla, Nov 01 '18 at 17:33
look at this article too https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975 — Mohamed Allal, Nov 01 '18 at 21:34

score 3 · Answer 3 · answered May 28 '20 at 03:17

Currently on version 9.0.6 this is a little different. Per Dico and Smokey Dawson above you would use the following in your angular.json:

"projects": {
    "angular-app": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {
            "@schematics/angular:component": {
                "styleext": "scss"
            }
        },
        "architect": {...}
    }
}

But in later versions the styleext property has changed to just style. Sourced from Angular Github here.

`But in later versions the styleext property has changed to just style` => thanks for that, that was what I actually was looking for — Dominik Ehrenberg, Aug 06 '21 at 14:00

How do I add Sass compilation in Angular CLI 6: angular.json?

3 Answers3

Linked