10

Avoid Importing Sass StyleSheet Multiple Times in Angular

Tuesday, March 3, 2020

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

Do

specify the stylesheet in the styles property of your Angular project configuration in angular.json

Avoid

duplicate imports of stylesheets or partials in multiple components

Why

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"
            ],
            ...
          }
        }
      }
    }
  }
}
Brian Love

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.

Google Developers Expert

Discussions are healthy ❤️