33

Using angular-cli at the command line, I executed:

ng set defaults.styleExt styl

to set the default styling to Stylus and I got this response:

get/set have been deprecated in favor of the config command

I want to change the style extension on an EXISTING project to use SCSS. How do I do this using the config command? Where is the documentation for ng config?

I am using Angular CLI v6.0.0

ng help says:

config Get/set configuration values

but doesn't elaborate. Thanks

danday74
  • 52,471
  • 49
  • 232
  • 283

3 Answers3

26

For Angular 6 you want to use the following command:

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

This will automatically add the "schematics" section halfer mentioned to the angular.json file.

Here is the official documentation: https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Mr Shantastic
  • 510
  • 1
  • 7
  • 16
  • 10
    I replaced `styl` with `scss` , that is `ng config schematics.@schematics/angular:component.styleext scss` – Alf Moh Jul 25 '18 at 07:48
  • Yes, this would be the correct way to change the default style extension to that of a sass file. I had put `styl` in my response because the individual asking the question was asking about changing the default styling to that of Stylus. That argument can be changed to whatever file extension you would like the default to be. – Mr Shantastic Jul 26 '18 at 13:28
  • I missed that. Didn't know the person was talking about stylus. Your answer is of course right. – Alf Moh Jul 26 '18 at 18:48
  • 1
    To setup for sass use the following: ng config schematics.@schematics/angular:component.styleext scss -g – Orin Aug 01 '18 at 15:33
24

OK I did a diff on a project generated with:

ng new --style=styl PROJECT_NAME

and the same without the --style flag and the differences in the angular.json config file are represented in the 2 .png files attached.

Using these diffs, I manually made the changes to angular.json as follows:

(1) Change projects.PROJECT_NAME.schematics as follows:

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

(2) Change projects.PROJECT_NAME.architect.build.options.styles as follows:

"styles": [                                                                                  
    "src/styles.styl"                                                                          
]

(3) Change projects.PROJECT_NAME.architect.test.options.styles as follows:

"styles": [                                                                                  
  "styles.styl"                                                                              
]

(4) Rename src/styles.css to src/styles.styl

Your existing components will happily continue to use .css but new components will now be generated with .styl files.

Diffs in PNG format as follows:

enter image description here

...

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
danday74
  • 52,471
  • 49
  • 232
  • 283
  • 1
    Where did you find this solution? Thanks, i'll try it for scss. These changes. – Wax May 08 '18 at 00:45
  • 2
    I didn't find this solution - I worked it out by doing a git diff on a project generated using the --style flag and a project generated without using that flag - glad it worked for u too :) – danday74 May 08 '18 at 01:02
  • 1
    clever dude ;-) – Marc Jun 25 '18 at 09:58
7

ng config projects.PROJECT_NAME.schematics.@schematics/angular:component '{ styleext: "scss"}'

for a specific project or for the default across all projects

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

George Wilson
  • 5,595
  • 5
  • 29
  • 42
  • 1
    the second one is not working with me. I received: "Cannot read property 'value' of null" – Cristiano May 29 '18 at 14:13
  • 1
    Oh, in order to use it we need to add a -g in the end: `ng config schematics.@schematics/angular:component '{ styleext: "scss"}' -g` – Cristiano May 29 '18 at 14:18
  • 1
    but even that being added to angular-config, ng new is still creating the project as css :( – Cristiano May 29 '18 at 14:30
  • 1
    even with `-g` I get `Invalid JSON character: "s" at 0:11.` – tatsu May 30 '18 at 06:51
  • 1
    I found a slightly different version of this which worked great and comes straight from the Angular-cli documentation. [https://github.com/angular/angular-cli/wiki/stories-css-preprocessors](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors) – Stack Underflow Jun 22 '18 at 20:15