升级USWDS时SCSS @forward中@extend CSS类不生效问题求助

这个问题其实是SCSS新模块系统（@use/@forward）的作用域隔离特性导致的，咱们来一步步理清楚：

核心原因 #

1. 你在extends.scss里用@use "uswds-core" as *引入了USWDS的核心模块，这意味着.usa-checkbox__label这个选择器只存在于extends.scss的独立模块作用域里。
2. 而主文件style.scss里是通过@forward "uswds"引入完整的USWDS，这是另一个独立的模块实例——两个模块里的.usa-checkbox__label其实是“不互通”的。
3. 当你用@forward "custom/extends"时，extends.scss的模块作用域和主文件的作用域是分离的，所以@extend .usa-checkbox__label找不到主文件里USWDS提供的那个选择器，自然无法生效。
4. 换成@import或者直接复制代码，本质是把extends.scss的代码合并到了主文件的同一作用域里，这时@extend就能找到目标选择器了。

可行解决方案 #

方案1：统一USWDS的引入入口（最直接）

修改extends.scss里的USWDS引入方式，和主文件保持一致：

// extends.scss
@use "uswds" as *; // 替换原来的@use "uswds-core"
.usa-checkbox__label-extend {
  @extend .usa-checkbox__label;
}

这样extends.scss和主文件共享同一个USWDS模块的选择器，@extend就能正常匹配到目标样式。

方案2：用@use替代@forward引入自定义扩展

把style.scss最后一行的@forward改成@use：

// style.scss
// ... 其他代码 ...
@use "custom/extends"; // 替换@forward

@use会把extends.scss的代码合并到当前主文件的作用域里，这样就能访问到前面@forward "uswds"提供的选择器，@extend自然生效。注意一定要保证@use "custom/extends"在@forward "uswds"之后。

方案3：使用USWDS的Mixin替代@extend（更推荐）

USWDS的组件样式大多提供了对应的Mixin，用Mixin来复用样式是模块系统下的最佳实践，能避免作用域问题：

// extends.scss
@use "uswds" as *;
.usa-checkbox__label-extend {
  @include usa-checkbox-label; // 具体Mixin名称请参考USWDS 3的文档
}

这种方式不需要依赖选择器的作用域，直接调用Mixin生成样式，更符合SCSS模块系统的设计理念。

总结 #

SCSS模块系统的核心就是作用域隔离，@extend要求被继承的选择器和当前@extend语句处于同一个作用域（或通过@use引入的共享模块）。只要保证这一点，就能解决你的问题啦。

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