这个问题的核心是CSS Modules默认的文件级作用域——每个SCSS文件里的类名都会被单独哈希，哪怕是通过@import导入的，也会被当作当前文件的类重新处理，所以.modal里引用的.inner和.checked会生成新的哈希，和checkbox.scss里的对应不上。

下面是两种可行的解决方案，推荐第一种模块化的方式：

方案一：使用CSS Modules的导出/导入机制（推荐） #

这种方式既能保留CSS Modules的模块化特性，又能安全复用类名：

1. 修改checkbox.scss，导出需要复用的类名 #

在checkbox.scss末尾添加:export块，把要共享的类名暴露出去：

// checkbox.scss
input {
  .inner { /* 你的样式代码 */ }
  .checked { /* 你的样式代码 */ }
}

// 导出需要复用的类名
:export {
  inner: inner;
  checked: checked;
}

2. 在modal.scss中导入并引用这些类名 #

用@import导入checkbox.scss的导出映射，然后用变量替代硬编码的类名：

// modal.scss
@import './checkbox';
// 导入checkbox.scss导出的类名映射
$checkboxClasses: './checkbox' !global;

.modal {
  &:hover {
    input + #{$checkboxClasses.inner}:not(#{$checkboxClasses.checked})::after { 
      /* 你的样式代码 */ 
    }
  }
}

这样Webpack会识别到这些引用的是checkbox.scss中已经哈希过的类名，不会重新生成新的哈希，保证样式能正确匹配。

方案二：使用全局类（不推荐，适合简单场景） #

如果你的项目不需要严格的模块化，可以把需要复用的类声明为全局类，这样Webpack不会对它们进行哈希处理：

修改checkbox.scss，用:global()包裹需要复用的类 #

// checkbox.scss
input {
  :global(.inner) { /* 你的样式代码 */ }
  :global(.checked) { /* 你的样式代码 */ }
}

之后在modal.scss中直接写.inner和.checked就可以了，因为这些类是全局的，不会被哈希，自然能跨文件复用。但这种方式会污染全局作用域，容易引发类名冲突，只适合小型项目或特殊场景。

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