parse error: failed at エラーが解決できません

前提・実現したいこと

ポートフォリオをこれまでVScodeのプラグインで使用していましたが、
gulpで環境構築し、dartsassで@useでコンパイルした際、以下のようなエラーが生じてしまいました。

発生している問題・エラーメッセージ

Sass Compiling Error
style.scss 
"parse error: failed at `@use 'Foundation/reset';` /Users/suzukikouhei/Local Sites/my-portfolio/app/public/wp-content/themes/portfolio_4/scss/style.scss on line 4, at column 1"

該当のソースコード

scss
1/* ===============================================*/
2/* # Foundation
3/*=============================================== */
4@use 'Foundation/reset';
5// @use 'Foundation/mediaquery';
6// @use 'Foundation/base';
7

エラーメッセージの通り、上記の部分に問題があるものと思われますが、コンパイル対象の@use 'Foundation/reset'; にはタイポも一見見当たらないように思われます。

試したこと

大変基礎的な部分なのか、該当の記事が見当たらず、下記のようなタイポを匂わせるような記事しか見当たらない状況です。
何か解決の糸口をいただけますと幸いです。

ちなみに下記のようにwatchでコンパイルしています。

js
1gulpfile.js
2
3// 各モジュールの読み込み
4const gulp = require('gulp');
5var sass = require('gulp-sass')(require('sass'));
6sass.compiler = require("dart-sass"); // sassのコンパイルにdart-sassを使用する
7const rename = require('gulp-rename');
8
9// sassコンパイルの設定
10function sassCompile(){
11  return (
12    gulp 
13      // 読み込みファイルをセット
14      .src('scss/style.scss')
15      // コンパイルの実行
16      .pipe(sass())
17      // 書き出すファイル名を指定
18      .pipe(rename('style.css'))
19      // 指定した場所にcssを書き出し
20      .pipe(gulp.dest('/css/'))
21  )
22}
23// "sassCompile"として使用する
24exports.sassCompile = sassCompile;
25
26function watch(){
27  gulp.watch('sass',sassCompile);
28}
29
30// "npx gulp"でwatchを実行する
31exports.default = watch;
32
33// 「npx gulp」でsassコンパイルを実行
34// exports.default = sassCompile;

json
1package.json
2{
3  "name": "aoshiro",
4  "version": "1.0.0",
5  "description": "",
6  "main": "index.js",
7  "scripts": {
8    "test": "echo \"Error: no test specified\" && exit 1"
9  },
10  "author": "",
11  "license": "ISC",
12  "devDependencies": {
13    "dart-sass": "^1.25.0",
14    "gulp": "^4.0.2",
15    "gulp-rename": "^2.0.0",
16    "gulp-sass": "^5.0.0"
17  }
18}
19

汚いですが、階層構造です...

scss
1.
2├── Foundation
3│   ├── _base.scss
4│   └── _reset.scss
5├── Global
6│   ├── _index.scss
7│   ├── _mediaquery.scss
8│   └── _variable.scss
9├── Layout
10│   ├── _font.scss
11│   ├── _footer.scss
12│   ├── _header.scss
13│   └── _main.scss
14├── Object
15│   ├── component
16│   │   ├── _humburger.scss
17│   │   ├── _page.scss
18│   │   ├── _section__inner.scss
19│   │   ├── _to__top.scss
20│   │   ├── slick-theme.scss
21│   │   └── slick.scss
22│   ├── project
23│   │   ├── _about.scss
24│   │   ├── _concept.scss
25│   │   ├── _contact.scss
26│   │   ├── _header__inner.scss
27│   │   ├── _section.scss
28│   │   ├── _service.scss
29│   │   ├── _single-navigation.scss
30│   │   ├── _single.scss
31│   │   └── _works.scss
32│   └── utility
33│       ├── _align.scss
34│       ├── _flexbox.scss
35│       ├── _margin.scss
36│       ├── _open.scss
37│       ├── align.css
38│       ├── align.css.map
39│       ├── align.min.css
40│       └── align.min.css.map
41├── _test.scss
42└── style.scss