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.
In the Angular CLI, all components are self-contained and so are their Sass files. In order to use a variable from within a component's Sass file, you'll need to import the _variables. scss file. One way to do this is to @import with a relative path from the component.
Angular supports Sass, CSS, and Less to style global application styles as well as component styles. In addition, angular component styles have an effective CSS encapsulation mechanism that assures any component CSS is local to the component and does not globally alter any styles.
Angular CLI uses JSON Schema to enforce the configuration schema. The Angular team created Schematics packages which are used by the CLI. We can configure the options of Schematics packages, as we please, for the root project and internal projects as well.
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.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With