Sass(Scss)で廃止予定になっている@importの@useへの置き換えについて

Question

前提・実現したいこと

Sassを利用して共通のヘッダーやフッターをファイル分割して管理しており、それらが必要なscssファイルに分割ファイルを読み込ませたいと思いました。しかし、@importは今後廃止されるとのことなので@useを使った書き方にしたいです。
@importのように任意の位置に分割したscssファイルを読み込ませたいのですが、@useではエラーがでてしまいます。
色々調べてみて、@useは冒頭でしか使えないことはわかったのですが、いまいち自分の実現したいことの解決法がわからず困っています。

該当のソースコード

↓style.scss

@charset "UTF-8";

$mainColor: #ffffff;
$subColor: #333333;

@mixin mediaSP {
  @media screen and (max-width: 767px) {
    @content;
  }
}

@mixin mediaPC {
  @media screen and (min-width: 768px) {
    @content;
  }
}

----------------

/* 中略 */

----------------

/* ヘッダー */

@import "header";

----------------

/* 中略 */

----------------

/* フッター */

@import "footer";

↓_header.scss

.header {
  width: 100%;
  height: 70px;
  background-color: $mainColor;
}

.header_logo a img {
  width: 100%;
  max-width: 90px;
  padding-top: 10%;

  @include mediaSP {
    position: absolute;
    top: 20%;
    left: 38%;
    padding: 0;
  }
}

↓_footer.scss

.copyright {
  margin: 0;
  background-color: $mainColor;
  font-size: 0.75rem;
  line-height: 50px;
  text-align: center;
}

試したこと

下記のようにコードを書き換えただけでは、「@useは冒頭にしか書けない」というエラーが出てしまいます。

↓style.scss

@charset "UTF-8";

$mainColor: #ffffff;
$subColor: #333333;

@mixin mediaSP {
  @media screen and (max-width: 767px) {
    @content;
  }
}

@mixin mediaPC {
  @media screen and (min-width: 768px) {
    @content;
  }
}

----------------

/* 中略 */

----------------

/* ヘッダー */

@use "header"; // @importを@useに置き換え

----------------

/* 中略 */

----------------

/* フッター */

@use "footer"; // @importを@useに置き換え

補足情報

LibSassが非推奨になったのでDartSassに移行する予定でコードを書き直すにあたり、今回の問題にぶつかってしまいました。
当方は、非エンジニアですがコーディングを勉強中の身です。どうぞお手柔らかにお願いいたします。