New Best Practice
Sign In

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.

Code Examples

{
  "$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"
            ],
            ...
          }
        }
      }
    }
  }
}

do: specify style URLs in project configuration

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

Brian Love

Brian is a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. He regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, Brian enjoys skiing, hiking, and being in the outdoors. Brian recently launched lookout.dev where you can find best practices and expert advice on topics ranging from TypeScript, Angular, React, Node.js and more.

Google Developers Expert

Discussions are healthy ❤️