Migrating Angular Material to v12 does not remove old import syntax

Question

I upgraded my Angular app to v12, and since I am using Material, I upgraded Material as well.

In the v12 announcement article they said that Material now expose new @use syntax and upgrade should migrate syntax automatically. They also added code example of the new VS old syntax .

So basically @import '~@angular/material/theming; should be replaced with @use '~@angular/material' as mat; .

When I checked changes after upgrade finished successfully, I noticed that in the styles.scss the @use '~@angular/material' as mat; line were added, BUT @import '~@angular/material/theming; line was NOT removed . So now, I have both @use and import in my styles.scss file.

Should I remove @import '~@angular/material/theming; ? As I understand, it will import the same thing twice, so it can only increase the size of the file.

Answer 1

As announced here the new @use is an improvement on how often scss files are imported. Basically both @import and @use work. BUT @use has potentially a better performance.