SCSS迁移：@use和@forward替换@import触发模块重复加载配置错误

方案1：拆分可配置变量为独立模块（组件库推荐方案） #

问题根源是SimpleButton模块被两个子组件共同引入，主文件中第二次配置时模块已完成加载，触发重复配置限制。将父组件的可配置变量抽离成单独的配置文件，让每个子组件拥有独立的配置入口：

1. 创建SimpleButton.config.scss定义默认变量：

$color: blue !default;
$padding: 0.5rem 1rem !default;
// 其他按钮基础配置变量

2. 修改SimpleButton.scss引入配置模块：

@use "./SimpleButton.config" as config;

.simple-button {
  background-color: config.$color;
  padding: config.$padding;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

3. 子组件转发各自的配置模块并引入父组件：
   AdvancedButton.scss：

@use "./SimpleButton" as simple;
@forward "./SimpleButton.config" as advanced-*; // 用命名空间区分配置变量

.advanced-button {
  @extend .simple-button;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  // 高级按钮专属样式
}

ExpertButton.scss：

@use "./SimpleButton" as simple;
@forward "./SimpleButton.config" as expert-*;

.expert-button {
  @extend .simple-button;
  font-size: 1.1rem;
  // 专家级按钮专属样式
}

4. 主文件中分别配置子组件：

// 先配置AdvancedButton的变量
@use "components/atoms/buttons/AdvancedButton.config" with (
  $color: green
);
@use "components/atoms/buttons/AdvancedButton";

// 再配置ExpertButton的变量
@use "components/atoms/buttons/ExpertButton.config" with (
  $color: red
);
@use "components/atoms/buttons/ExpertButton";

方案2：用Mixin替代继承（灵活度更高） #

如果组件间样式差异较大，直接用Mixin封装父组件样式，子组件通过参数传递自定义变量，彻底避免模块加载冲突：

1. 修改SimpleButton.scss为Mixin：

@mixin button-base($color: blue, $padding: 0.5rem 1rem) {
  background-color: $color;
  padding: $padding;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

2. 子组件引入Mixin并传入自定义参数：
   AdvancedButton.scss：

@use "./SimpleButton" as simple;

.advanced-button {
  @include simple.button-base($color: green);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  // 其他高级样式
}

ExpertButton.scss：

@use "./SimpleButton" as simple;

.expert-button {
  @include simple.button-base($color: red, $padding: 0.75rem 1.5rem);
  font-size: 1.1rem;
  // 其他专家级样式
}

3. 主文件直接引入两个子组件即可：

@use "components/atoms/buttons/AdvancedButton";
@use "components/atoms/buttons/ExpertButton";

为什么原来的@import没问题？ #

@import是将代码注入全局作用域，重复引入时会覆盖之前的变量/样式；而@use是模块化加载，每个模块在编译过程中只会被加载一次，因此无法通过with重复配置已加载的模块。

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