reactjs - import の代わりに use を使用して dart-sass を使用してブートストラップ変数をオーバーライドできない

Question

dart-sass を使用して変数をオーバーライドするブートストラップの経験がある人はいますか?

をnode-sass使用すると、ブートストラップが内部的に使用するデフォルト/変数をimport上書きするために、これを行うことができます$spacer$spacers

$spacer: 1rem !default;
$spacers: (
  0: 0,
  // 2px
  1:
    (
      // 4px
      $spacer * 0.25
    ),
  2: (
    // 8px
    $spacer * 0.5
  ),
  3: $spacer,
  4: (
    // 24px
    $spacer * 1.5
  ),
  5: (
    // 32px
    $spacer * 2
  ),
  6: (
    // 48px
    $spacer * 3
  ),
  7: (
    // 64px
    $spacer * 4
  ),
  8: (
    // 80px
    $spacer * 5
  ),
  9: (
    // 100px
    $spacer * 6.25
  )
);

@import "~bootstrap/scss/bootstrap";

しかし、に切り替える

@use "~bootstrap/scss/bootstrap";

新しい dart sass 標準に従うために、これを破り、上記の再宣言された変数は無視されます

私はこれを試しました、

@use "~bootstrap/scss/bootstrap" with (
  $spacer: 1rem !default;
  $spacers: (...)
);

しかし、これもうまくいきません。

ERROR in ./src/client/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined operation "1rem default * 0.5".
    ╷
622 │ $headings-margin-bottom:      $spacer * .5 !default;
    │                               ^^^^^^^^^^^^
    ╵
  node_modules/bootstrap/scss/_variables.scss 622:31  @import
  node_modules/bootstrap/scss/bootstrap.scss 11:9     @use
  src/client/app.scss 2:1                             root stylesheet

私が試した他の解決策では、他のエラーが発生するだけです。私はまだ学んでいますが、これに非常にこだわっています。誰かアイデアはありますか?

これを webpack sass-loader 経由でバンドルしています