Gulpで「Cannot find module gulp-sass」エラーが出たときの解決方法まとめ

Gulpを実行した際に、「Cannot find module 'gulp-sass'（モジュールgulp-sassが見つかりません）」といったエラーメッセージが表示されることがあります。

このエラーは、Gulpがgulp-sassパッケージの機能を呼び出そうとしているものの、そのパッケージを見つけられないことを意味しています。

この厄介なエラーに悩まされている方は、以下の対処法を試してみてください。原因に応じていくつかの解決策があります。

1. node_modulesフォルダを確認する

npmでパッケージをインストールすると、プロジェクトのルート直下にnode_modulesフォルダが作成され、インストールしたパッケージの情報がpackage.jsonとpackage-lock.jsonファイルにも記録されます。

まずは、対象のパッケージが正しくインストールされているかを確認しましょう。package.jsonとpackage-lock.jsonに該当パッケージが記載されているかチェックし、さらにnode_modulesフォルダ内にそのパッケージのサブフォルダが存在するかも確認してください。

最後に、WebサイトやWebアプリをプロジェクトのルートフォルダから実行しているか、そしてそのルートフォルダの直下にnode_modulesフォルダが配置されているかを確認します。node_modulesフォルダが正しい場所にないと、このエラーが発生する原因になります。

2. gulp-sassモジュールを手動で再インストールする

node_modulesフォルダ内にgulp-sassパッケージが見当たらない場合や、上記の確認でも問題が解決しない場合は、パッケージの再インストールを試みましょう。

まず、package.jsonとpackage-lock.jsonファイルを開き、gulp-sassおよびnode-sassに関する記述をすべて削除します。これにより、最新バージョンのパッケージを確実に再インストールできるようになります。

次に、npm install gulp-sassまたはnpm install gulp-sass --save-devコマンドを実行して、パッケージをインストールしpackage.jsonに保存します。--save-devフラグを付けると、パッケージはpackage.jsonのdevDependenciesセクションに追加されます。

フラグを付けない場合はdependenciesセクションに追加されます。ローカル環境での開発が中心であれば、どちらのセクションを使っても大きな違いはないため、自分の好みに合わせて選択して問題ありません。

なお、この方法でインストールしたパッケージはプロジェクトフォルダ内にローカル保存され、そのプロジェクトからのみ利用可能です。コンピュータ全体にグローバルインストールすれば、どのディレクトリからでもアクセスできるようになります。

グローバルインストールするには、installコマンドにグローバル（-g）フラグを付けて、npm install -g gulp-sassのように実行します。

ただし、筆者は基本的にパッケージはプロジェクトごとにローカルインストールする方針です。gulp-cliだけはグローバルにインストールしますが、それ以外はすべてローカルで管理しています。

3. npmパッケージをすべて削除して再インストールする

gulp-sassパッケージだけを削除・再インストールしても改善しない場合は、npmパッケージ全体を削除して再インストールする方法を試してみてください。

まず、プロジェクトに必要なすべてのパッケージがpackage.jsonファイルに記載されていることを確認します。もちろん、gulp-sassもpackage.jsonに含まれている必要があります。

次に、node_modulesフォルダを削除します。ファイルエクスプローラーから削除してもよいですし、コマンドラインでrm node_modulesを実行しても構いません。フォルダの削除中にエラーや問題が発生した場合は、削除作業を支援するrimrafというnpmパッケージの利用を検討してください。

筆者はrimrafをグローバルにインストールしており、どのディレクトリからでも実行できるようにしています。npm install -g rimrafコマンドでグローバルインストールでき、その後プロジェクトルートのコマンドラインからrimraf node_modulesを実行することでフォルダを削除できます。

それでもnode_modules\@types is not accessibleのようなエラーが表示される場合は、まずVS Codeなど使用中のコードエディタを閉じてから、再度フォルダの削除を試みてください。エディタがファイルをロックしていることが原因の場合があります。

node_modulesフォルダの削除に成功したら、プロジェクトルートでnpm installを実行し、package.jsonに記載されているすべてのパッケージを再インストールしましょう。