Sass利用環境（Sassの教科書通りにできない）

Sassに関しては、前に少し勉強したことはありましたが、もう少し勉強しようと思い、いろいろと調べてみて書籍「Sassの教科書」を購入しました。
第2章でSassの利用環境を設定していくのですが、途中でエラーになって上手く進まなかったので、対応について備忘録として残しておきます。

MacBook Air M1では、書籍通りでは上手くいかない。

Node.jsを完了した後、npmコマンドを使って環境をインストールしていくんですが、何ヶ所かそのままでは進めませんでした。

gulp-cliをインストール：できない。

「npm install –global gulp-cli」を実行
「gulp -v」で確認すると「gulp: command not found」となりインストールできていない。

解決

管理者権限でコマンドを実行することで解決
「sudo npm install –global gulp-cli」を実行することで解決できた。

npm install で一括インストール：できない。

「npm install」を実行すると、「node-modules」というディレクトリが追加されると書かれているが、追加されない。

解決

書籍のサイトからダウンロードしたファイルの「package.json」で定義されているバージョンが古いため、エディタでバージョン情報を書き換える。
「”gulp-sass”: “^4.1.0″」 → 「”gulp-sass”: “^5.1.0”」
書き換えた後、再度、「npm install」を実行すると解決できた。

Sassをコンパイルする：できない。

「gulp sass」を実行
コンパイルされない（「css」ディレクトリと「sample.css」が作成されない）

解決

M1チップでは「node-sass」が使えないことが原因
「gulp-sass」では「node-sass」が使われているため「sass」への移行が必要
「gulp-sass 5」をインストールすることで解決することがわかった。

「npm install –save-dev gulp-sass@^5 sass」を実行
「gulpfile.js」の記述を書き換える。
「var sass = require(‘gulp-sass’);」 → 「var sass = require(‘gulp-sass’)(require(‘sass’));」

対応後、再度、「gulp sass」を実行を実行すると解決できた。