From d9764053478620a5f4a3349c377c74415435bcbb Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Tue, 23 Aug 2022 13:22:02 -0400
Subject: [PATCH] perf(@angular-devkit/build-angular): with esbuild builder
 only load Sass compiler when needed

Previously, the Sass compiler was imported on the start of every build regardless of its usage.
The Sass compiler will now only be loaded if a Sass stylesheet is requested.

(cherry picked from commit 87a61aac362eb8fc343645b7e6856d8235bb694f)
---
 .../src/builders/browser-esbuild/sass-plugin.ts           | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts
index cd315855b119..0c820f1ffe1a 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts
@@ -16,12 +16,10 @@ export function createSassPlugin(options: { sourcemap: boolean; loadPaths?: stri
     setup(build: PluginBuild): void {
       let sass: typeof import('sass');
 
-      build.onStart(async () => {
-        // Lazily load Sass
-        sass = await import('sass');
-      });
+      build.onLoad({ filter: /\.s[ac]ss$/ }, async (args) => {
+        // Lazily load Sass when a Sass file is found
+        sass ??= await import('sass');
 
-      build.onLoad({ filter: /\.s[ac]ss$/ }, (args) => {
         try {
           const warnings: PartialMessage[] = [];
           // Use sync version as async version is slower.