Error in plugin "gulp-sass" と gulp-saasがコンパイルできないエラー

Gulpを使おうとした時、「gulp-sass」でコンパイルできなくなっていた...。
解決方法を見つけたので、記載しておきます。

エラー

Error in plugin "gulp-sass"
Message:
    
gulp-sass no longer has a default Sass compiler; please set one yourself.
Both the "sass" and "node-sass" packages are permitted.
For example, in your gulpfile:

  const sass = require('gulp-sass')(require('sass'));

メッセージを見てみると、「sass」または「node-sass」をインストールして、
新しいコードに直すことで解決できると。

原因

M1チップ Macではnode-sassが使えない。
gulp-sassでは、node-saasが使われており、arm版に対応しているよう。

M1チップ Macではsassに乗り換える必要があり、gulp-sass 5 を入れると解決する。

公式によると、「gulp-sass 5 から NodeSassは非推奨」とあったので、
node-sassを使っている方は、sassに移行してください。

解決策

gulp-saasのversionを5に上げる。
gulp-sass 5 からはnode-saasではなくsassが使われているため、
バージョンアップだけで問題なく動くようになりました。

1 . gulp-sass 5 をインストール

• 【方法1】 コマンドでgulp-sass5、sassをインストール

$ npm install --save-dev gulp-sass@^5 sass

• 【方法2】 package.json に記述してインストール

package.json

"gulp-sass": "^5.1.0",
"sass": "^1.49.9",

上記を package.json に追加してから、

$npm i

gulp-sass 5 インストール前

package-lock.json

"gulp-sass": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.1.0.tgz",
      "integrity": "sha512-xIiwp9nkBLcJDpmYHbEHdoWZv+j+WtYaKD6Zil/67F3nrAaZtWYN5mDwerdo7EvcdBenSAj7Xb2hx2DqURLGdA==",
      "dev": true,
      "requires": {
        "chalk": "^2.3.0",
        "lodash": "^4.17.11",
        "node-sass": "^4.8.3",
        "plugin-error": "^1.0.1",
        "replace-ext": "^1.0.0",
        "strip-ansi": "^4.0.0",
        "through2": "^2.0.0",
        "vinyl-sourcemaps-apply": "^0.2.0"
      }, # 以下省略
"node-sass": {
      "version": "4.14.1",
      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
      "dev": true,
      "requires": {
        "async-foreach": "^0.1.3",
        "chalk": "^1.1.1",
        "cross-spawn": "^3.0.0",
        "gaze": "^1.0.0",
        "get-stdin": "^4.0.1",
        "glob": "^7.0.3",
        "in-publish": "^2.0.0",
        "lodash": "^4.17.15",
        "meow": "^3.7.0",
        "mkdirp": "^0.5.1",
        "nan": "^2.13.2",
        "node-gyp": "^3.8.0",
        "npmlog": "^4.0.0",
        "request": "^2.88.0",
        "sass-graph": "2.2.5",
        "stdout-stream": "^1.4.0",
        "true-case-path": "^1.0.2"
      },

gulp-sass 5 インストール後

package-lock.json

"gulp-sass": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-5.1.0.tgz",
      "integrity": "sha512-7VT0uaF+VZCmkNBglfe1b34bxn/AfcssquLKVDYnCDJ3xNBaW7cUuI3p3BQmoKcoKFrs9jdzUxyb+u+NGfL4OQ==",
      "dev": true,
      "requires": {
        "lodash.clonedeep": "^4.5.0",
        "picocolors": "^1.0.0",
        "plugin-error": "^1.0.1",
        "replace-ext": "^2.0.0",
        "strip-ansi": "^6.0.1",
        "vinyl-sourcemaps-apply": "^0.2.1"
      }, # 以下省略
"sass": {
      "version": "1.49.9",
      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz",
      "integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==",
      "dev": true,
      "requires": {
        "chokidar": ">=3.0.0 <4.0.0",
        "immutable": "^4.0.0",
        "source-map-js": ">=0.6.2 <2.0.0"
      },

2 . 記述を変更

gulp-sass

var sass = require('gulp-sass');

gulp-sass 5

const sass = require('gulp-sass')(require('sass'));

var、letでも可能。

MacBook を M1 にしてからgulpを使う際は、gulp-sass のバージョンを上げてみてください。
他にも原因や解決方法があると思いますが、私はこれで解決しました。