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 を入れると解決する。


:::note info
公式によると、「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 のバージョンを上げてみてください。
他にも原因や解決方法があると思いますが、私はこれで解決しました。