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"
],
...
}
}
}
}
}
}I am a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. I regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, I enjoy skiing, hiking, and being in the outdoors. I started lookout.dev to break down the barriers of learning in public. Learning in public fosters growth - for ourselves and others.
Have a question or comment?