在React中引入Material Components for Web样式及Sass @use与@import的区别

@use 和 @import 的差异对比 #

作用域差异

• @import 无独立作用域：导入文件内的所有变量、Mixin、函数会全部注入全局，容易出现同名变量覆盖、同个样式文件多次导入重复编译的问题。
• @use 是 Sass 官方推出的@import替代方案，自带命名空间：默认以文件名作为命名空间，需要通过命名空间.变量/命名空间.Mixin的方式调用，不会污染全局作用域，同个文件无论导入多少次只会编译一次。

语法支持差异

• @import 属于老旧语法，Sass 官方已经明确会在未来版本废弃，新的Sass生态工具和组件库逐步停止对@import的特性适配。
• @use 支持模块变量自定义、导入重命名等高级功能，比如导入MDC组件时可以直接在@use语句中配置主题色、圆角等默认参数，不需要全局覆盖变量。

MDC样式失效原因说明 #

你注释了@include button.core-styles;才是样式未生效的核心原因，并非文档存在bug：
@use "@material/button"仅导入按钮模块的变量、Mixin定义，不会主动输出任何CSS样式，必须调用button.core-styles这个Mixin才会生成所有mdc-button相关的类名样式。而你改用@import "@material/button/mdc-button"能生效，是因为这个文件是已经封装好的静态样式文件，导入后会直接输出所有按钮类的样式，不需要额外调用Mixin。

两者适用场景 #

• 推荐用@use的场景：
  • 需要自定义MDC等组件库的主题、修改默认样式参数
  • 大型多模块项目，需要避免全局样式污染
  • 项目使用的Sass版本（Dart Sass 1.23.0+）支持@use语法
• 可以用@import的场景：
  • 导入的是直接输出CSS的静态样式文件
  • 项目使用的Sass版本过低，不支持@use语法
  • 快速验证功能、不需要做样式自定义的简单场景

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