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