0

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.

NeNaD
  • 18,172
  • 8
  • 47
  • 89

1 Answers1

0

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.

David B.
  • 695
  • 5
  • 10