升级Angular Material至v12未自动移除旧@import语法问题咨询

你完全可以手动删除@import '~@angular/material/theming';这一行，而且推荐尽快删除。

保留重复引入的不良影响 #

1. 你提到的体积增加只是最基础的问题，双重引入会导致Material的主题样式被重复编译打包，生产环境的CSS体积会多出几十KB到上百KB不等，拖慢页面首屏加载速度。
2. 更严重的是会引发样式优先级冲突：重复引入的默认样式可能会覆盖你自定义的主题配置，出现组件颜色、尺寸不符合预期的问题，这类样式问题排查成本很高。
3. 另外Sass官方已经将@import语法标记为废弃特性，未来高版本Sass会直接移除对该语法的支持，保留旧代码会给后续的依赖升级埋坑。

补充说明 #

Angular官方的自动迁移脚本为了最大化兼容旧项目，默认只新增@use语法的引入，不会主动删除原有代码，避免你项目中还存在依赖旧@import暴露的变量、混合宏的代码。

操作建议 #

• 删掉旧@import行后，先执行生产构建确认没有编译报错
• 如果出现变量/混合宏未定义的报错，将对应的调用语法改为@use对应的前缀写法即可，比如原有@include mat-core()改为@include mat.core()，原有$my-primary: mat-palette($mat-red)改为$my-primary: mat.define-palette(mat.$red-palette)
• 启动开发服务验证所有Material组件的样式、自定义主题是否正常生效即可。

内容的提问来源于stack exchange，提问作者NeNaD