diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts index 3e49db280625..73c09506b46b 100644 --- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts +++ b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts @@ -149,7 +149,10 @@ export async function buildEsbuildBrowser( const { entryPoints: stylesheetEntrypoints, noInjectNames } = resolveGlobalStyles( options.styles, workspaceRoot, - !!options.preserveSymlinks, + // preserveSymlinks is always true here to allow the bundler to handle the option + true, + // skipResolution to leverage the bundler's more comprehensive resolution + true, ); for (const [name, files] of Object.entries(stylesheetEntrypoints)) { const virtualEntryData = files @@ -164,6 +167,7 @@ export async function buildEsbuildBrowser( sourcemap: !!sourcemapOptions.styles && (sourcemapOptions.hidden ? 'external' : true), outputNames: noInjectNames.includes(name) ? { media: outputNames.media } : outputNames, includePaths: options.stylePreprocessorOptions?.includePaths, + preserveSymlinks: options.preserveSymlinks, }, ); diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/stylesheets.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/stylesheets.ts index b36f481dbb4f..81ef5c5286f7 100644 --- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/stylesheets.ts +++ b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/stylesheets.ts @@ -38,8 +38,8 @@ async function bundleStylesheet( write: false, platform: 'browser', preserveSymlinks: options.preserveSymlinks, - conditions: ['style'], - mainFields: ['style'], + conditions: ['style', 'sass'], + mainFields: ['style', 'sass'], plugins: [ createSassPlugin({ sourcemap: !!options.sourcemap, includePaths: options.includePaths }), ], diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts index e1ecba8216ea..f522790b68b6 100644 --- a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts +++ b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts @@ -30,6 +30,7 @@ export function resolveGlobalStyles( styleEntrypoints: StyleElement[], root: string, preserveSymlinks: boolean, + skipResolution = false, ): { entryPoints: Record; noInjectNames: string[]; paths: string[] } { const entryPoints: Record = {}; const noInjectNames: string[] = []; @@ -40,22 +41,25 @@ export function resolveGlobalStyles( } for (const style of normalizeExtraEntryPoints(styleEntrypoints, 'styles')) { - let resolvedPath = path.resolve(root, style.input); - if (!fs.existsSync(resolvedPath)) { - try { - resolvedPath = require.resolve(style.input, { paths: [root] }); - } catch {} + let stylesheetPath = style.input; + if (!skipResolution) { + stylesheetPath = path.resolve(root, stylesheetPath); + if (!fs.existsSync(stylesheetPath)) { + try { + stylesheetPath = require.resolve(style.input, { paths: [root] }); + } catch {} + } } if (!preserveSymlinks) { - resolvedPath = fs.realpathSync(resolvedPath); + stylesheetPath = fs.realpathSync(stylesheetPath); } // Add style entry points. if (entryPoints[style.bundleName]) { - entryPoints[style.bundleName].push(resolvedPath); + entryPoints[style.bundleName].push(stylesheetPath); } else { - entryPoints[style.bundleName] = [resolvedPath]; + entryPoints[style.bundleName] = [stylesheetPath]; } // Add non injected styles to the list. @@ -64,7 +68,7 @@ export function resolveGlobalStyles( } // Add global css paths. - paths.push(resolvedPath); + paths.push(stylesheetPath); } return { entryPoints, noInjectNames, paths };