diff --git a/packages/angular/build/src/builders/application/tests/behavior/stylesheet-url-resolution_spec.ts b/packages/angular/build/src/builders/application/tests/behavior/stylesheet-url-resolution_spec.ts
index 44f0cd871908..a66248b55561 100644
--- a/packages/angular/build/src/builders/application/tests/behavior/stylesheet-url-resolution_spec.ts
+++ b/packages/angular/build/src/builders/application/tests/behavior/stylesheet-url-resolution_spec.ts
@@ -269,6 +269,58 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
harness.expectFile('dist/browser/media/logo.svg').toExist();
});
+ it('should rebase a URL with an leading interpolation referencing a local resource', async () => {
+ await harness.writeFiles({
+ 'src/styles.scss': `@use 'theme/a';`,
+ 'src/theme/a.scss': `
+ @import './b';
+ .a {
+ background-image: url(#{$my-var}logo.svg)
+ }
+ `,
+ 'src/theme/b.scss': `$my-var: "./images/";`,
+ 'src/theme/images/logo.svg': ``,
+ });
+
+ harness.useTarget('build', {
+ ...BASE_OPTIONS,
+ outputHashing: OutputHashing.None,
+ styles: ['src/styles.scss'],
+ });
+
+ const { result } = await harness.executeOnce();
+ expect(result?.success).toBeTrue();
+
+ harness.expectFile('dist/browser/styles.css').content.toContain(`url("./media/logo.svg")`);
+ harness.expectFile('dist/browser/media/logo.svg').toExist();
+ });
+
+ it('should rebase a URL with an non-leading interpolation referencing a local resource', async () => {
+ await harness.writeFiles({
+ 'src/styles.scss': `@use 'theme/a';`,
+ 'src/theme/a.scss': `
+ @import './b';
+ .a {
+ background-image: url(./#{$my-var}logo.svg)
+ }
+ `,
+ 'src/theme/b.scss': `$my-var: "./images/";`,
+ 'src/theme/images/logo.svg': ``,
+ });
+
+ harness.useTarget('build', {
+ ...BASE_OPTIONS,
+ outputHashing: OutputHashing.None,
+ styles: ['src/styles.scss'],
+ });
+
+ const { result } = await harness.executeOnce();
+ expect(result?.success).toBeTrue();
+
+ harness.expectFile('dist/browser/styles.css').content.toContain(`url("./media/logo.svg")`);
+ harness.expectFile('dist/browser/media/logo.svg').toExist();
+ });
+
it('should not process a URL that has been marked as external', async () => {
await harness.writeFiles({
'src/styles.scss': `@use 'theme/a';`,
diff --git a/packages/angular/build/src/tools/sass/rebasing-importer.ts b/packages/angular/build/src/tools/sass/rebasing-importer.ts
index f4567d4c3b41..a5af1f948800 100644
--- a/packages/angular/build/src/tools/sass/rebasing-importer.ts
+++ b/packages/angular/build/src/tools/sass/rebasing-importer.ts
@@ -84,7 +84,12 @@ abstract class UrlRebasingImporter implements Importer<'sync'> {
}
// Skip if root-relative, absolute or protocol relative url
- if (/^((?:\w+:)?\/\/|data:|chrome:|#|\/)/.test(value)) {
+ if (/^((?:\w+:)?\/\/|data:|chrome:|\/)/.test(value)) {
+ continue;
+ }
+
+ // Skip if a fragment identifier but not a Sass interpolation
+ if (value[0] === '#' && value[1] !== '{') {
continue;
}