Avoid Importing Sass StyleSheet Multiple Times in Angular
Tuesday, March 3, 2020
Avoid Importing Sass StyleSheet Multiple Times in Angular
Specify commonly used stylesheets using the styles
property in angular.json for your project configuration to avoid sending duplicate stylesheets in an Angular application.
While Sass @import()
should be leveraged in component stylesheets with Angular, it is important to avoid duplicating the same stylesheet (or partial) import in multiple components. This can lead to duplicating styles that are included in your application's bundles, which can lead to reduced time-to-interactivity (TTI) of your application, and larger than necessary bundle sizes.
Instructions
specify the stylesheet in the styles
property of your Angular project configuration in angular.json
duplicate imports of stylesheets or partials in multiple components
reduce bundle sizes to increase the performance of your application
Code Examples
specify style URLs in project configuration
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"lookout": {
...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"styles": [
"src/styles.scss",
"node_modules/library/styles.scss"
"node_modules/library/theme.css"
],
...
}
}
}
}
}
}
Have a question or comment?