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:<
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"}'
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:
...
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