gulp-sassを使ってDart Sassでコンパイルできるようにしよう【gulp4】

test
├ node_modules
├ src
│ ├ css
│ ├ sass
│ │ ├ module
│ │ │ ├ _header.scss
│ │ │ ├ _footer.scss
│ │ │ └ _variable.scss
│ │ └ style.scss
│ └ index.html
├ gulpfile.js
├ package-lock.json
└ package.json

@use "./module/header";
@use "./module/footer";
@use "./module/variable";

@use "./module/*";

@use "./variable";

.footer{
  background-color: variable.$color-black;
}

@use "./variable" as *;

.footer{
  background-color: $color-black;
}

npm i -D sass

npm i -D gulp-sass

npm i -D gulp-sass-glob-use-forward

npm i -D gulp-autoprefixer

npm i -D gulp-plumber

//----------------------------------------------------------------------
//  モード
//----------------------------------------------------------------------
"use strict";

//----------------------------------------------------------------------
//  モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, watch, series, parallel } = require("gulp");

const plumber = require("gulp-plumber");
const sassGlob = require("gulp-sass-glob-use-forward");
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require("gulp-autoprefixer");

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function compile(done) {
  src("./src/sass/**/*.scss")
    .pipe(plumber())                   // watch中にエラーが発生してもwatchが止まらないようにする
    .pipe(sassGlob())                  // glob機能を使って@useや@forwardを省略する
    .pipe(sass())                      // sassのコンパイルをする
    .pipe(autoprefixer())              // ベンダープレフィックスを自動付与する
    .pipe(dest("./src/css"));

  done();
}

//----------------------------------------------------------------------
//  タスク定義
//----------------------------------------------------------------------
exports.compile = series(compile);

/************************************************************************/
/*  END OF FILE                                                         */
/************************************************************************/

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^5.0.0",
    "gulp-sass-glob-use-forward": "^0.1.3",
    "sass": "^1.42.0"
  },


  "browserslist": [
    "last 2 versions",
    "ie >= 11",
    "Android >= 4"
  ]
}

npx gulp compile

[00:00:00] Starting 'compile'...
[00:00:00] Starting 'compile'...
[00:00:00] Finished 'compile' after 20 ms
[00:00:00] Finished 'compile' after 23 ms