如何多次加载同一SCSS模块并使用不同配置？

我正在使用一款SCSS加载器（spinner）库，需要使用不同样式的加载器，因此在两个不同的SCSS文件中通过@use语句加载同一个loaders.scss模块，并传入不同配置参数，而这两个文件又被同一个main-style.scss文件@use引用。简化结构如下：

// main-style.scss
@use "_page-bottom-form.scss";
@use "_navigation-tools-shared.scss";

// 上述两个文件中均使用如下方式加载模块：
// @use "loaders.scss" as * with( $configuration );

运行时出现如下Dart Sass错误：

Dart Sass failed with this error: This module was already loaded, so it can't be configured using "with".
  ┌──> parts/components/_page-bottom-form.scss
5 │ ┌ @use "../../node_modules/spinthatshit/src/loaders.scss" as * with(
6 │ │   $loader-color: $white,
7 │ │   $loader-size: 5px,
8 │ │   $loader-gap: 5px
9 │ │ );
  │ └─^ new load
  ╵
  ┌──> parts/structure/_navigation-tools-shared.scss
4 │ ┌ @use "../../node_modules/spinthatshit/src/loaders.scss"  as * with(
5 │ │   $loader-color: $mid-grey,
6 │ │     $loader-size: 20px,
7 │ │     $loader-height: 20px,
8 │ │     $loader-border-size: 3px,
9 │ │ );
  │ └─^ original load
  ╵
  parts/components/_page-bottom-form.scss 5:1  @use
  parts/_main-style.scss 16:1                  @use
  style.scss 2:1                               root stylesheet

请问如何在保持当前SCSS文件结构的前提下解决该问题？

• 在入口层统一配置多份模块实例
  调整main-style.scss，分别以不同别名加载loaders.scss并传入对应配置，再把这些实例传递给子模块：

  // main-style.scss
  @use "../../node_modules/spinthatshit/src/loaders.scss" as form-loader with(
    $loader-color: $white,
    $loader-size: 5px,
    $loader-gap: 5px
  );
  @use "../../node_modules/spinthatshit/src/loaders.scss" as nav-loader with(
    $loader-color: $mid-grey,
    $loader-size: 20px,
    $loader-height: 20px,
    $loader-border-size: 3px
  );
  
  // 把配置好的实例传递给子模块
  @use "_page-bottom-form.scss" with (
    $loader: form-loader
  );
  @use "_navigation-tools-shared.scss" with (
    $loader: nav-loader
  );
  

  然后修改子模块，接收传入的加载器实例：

  // _page-bottom-form.scss
  @use "../main-style.scss" as * with (
    $loader: null
  );
  
  // 使用传入的实例调用加载器样式
  .form-loader {
    @include $loader.spinner();
  }
  

• 为子模块创建专属的加载器包装文件
  给每个需要不同配置的子模块单独创建一个包装SCSS文件，在包装文件中配置加载器，再让子模块引用包装文件：

  // _form-loader.scss
  @use "../../node_modules/spinthatshit/src/loaders.scss" as * with(
    $loader-color: $white,
    $loader-size: 5px,
    $loader-gap: 5px
  );
  

  // _nav-loader.scss
  @use "../../node_modules/spinthatshit/src/loaders.scss" as * with(
    $loader-color: $mid-grey,
    $loader-size: 20px,
    $loader-height: 20px,
    $loader-border-size: 3px
  );
  

  然后子模块分别引用对应的包装文件：

  // _page-bottom-form.scss
  @use "_form-loader.scss" as *;
  

  // _navigation-tools-shared.scss
  @use "_nav-loader.scss" as *;
  

  这种方式不需要修改main-style.scss的结构，完全保留原有文件引用关系。

• 使用混合宏（Mixin）动态传入参数
  如果该加载器库支持通过Mixin动态传入参数（而非仅靠模块配置），可以直接在子模块中调用Mixin时传递参数：

  // _page-bottom-form.scss
  @use "../../node_modules/spinthatshit/src/loaders.scss" as *;
  
  .form-loader {
    @include spinner($color: $white, $size: 5px, $gap: 5px);
  }
  

  // _navigation-tools-shared.scss
  @use "../../node_modules/spinthatshit/src/loaders.scss" as *;
  
  .nav-loader {
    @include spinner($color: $mid-grey, $size: 20px, $height: 20px, $border-size: 3px);
  }
  

  这种方式最简洁，但前提是库提供了支持动态参数的Mixin。

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