diff --git a/src/cdk/schematics/ng-update/migrations/tilde-import-v13/tilde-import-migration.ts b/src/cdk/schematics/ng-update/migrations/tilde-import-v13/tilde-import-migration.ts index 671a1a8d08bd..3a6fe74917d4 100644 --- a/src/cdk/schematics/ng-update/migrations/tilde-import-v13/tilde-import-migration.ts +++ b/src/cdk/schematics/ng-update/migrations/tilde-import-v13/tilde-import-migration.ts @@ -21,10 +21,11 @@ export class TildeImportMigration extends DevkitMigration { if (extension === '.scss' || extension === '.css') { const content = stylesheet.content; const migratedContent = content.replace( - /@(?:import|use) +['"]~@angular\/.*['"].*;?/g, - match => { - const index = match.indexOf('~@angular'); - return match.slice(0, index) + match.slice(index + 1); + /@(?:import|use) +['"](~@angular\/.*)['"].*;?/g, + (match, importPath) => { + const index = match.indexOf(importPath); + const newImportPath = importPath.replace(/^~|\.scss$/g, ''); + return match.slice(0, index) + newImportPath + match.slice(index + importPath.length); }, ); diff --git a/src/cdk/schematics/ng-update/test-cases/v13/misc/tilde-import-v13.spec.ts b/src/cdk/schematics/ng-update/test-cases/v13/misc/tilde-import-v13.spec.ts index d831eaf148ff..360dd588a877 100644 --- a/src/cdk/schematics/ng-update/test-cases/v13/misc/tilde-import-v13.spec.ts +++ b/src/cdk/schematics/ng-update/test-cases/v13/misc/tilde-import-v13.spec.ts @@ -124,4 +124,26 @@ describe('v13 tilde import migration', () => { `@include mat-core();`, ]); }); + + it('should remove remove .scss file extension', async () => { + writeLines(TEST_PATH, [ + `@use '~@angular/material.scss' as mat;`, + `@import '~@angular/material/theming.scss';`, + `@import '~@angular/cdk/overlay-prebuilt.css';`, + + `@include mat.button-theme();`, + `@include mat-core();`, + ]); + + await runMigration(); + + expect(splitFile(TEST_PATH)).toEqual([ + `@use '@angular/material' as mat;`, + `@import '@angular/material/theming';`, + `@import '@angular/cdk/overlay-prebuilt.css';`, + + `@include mat.button-theme();`, + `@include mat-core();`, + ]); + }); });