Module not found: Error: Can’t resolve ‘sass-loader’ in Vue.js の解決方法

「Module not found: Error: Can’t resolve ‘sass-loader’ in Vue.js」は、Vue.jsのプロジェクトでSASSを使用しようとした際に、sass-loaderが正しくインストールされていない場合に発生するエラーです。このエラーは、sass-loaderが依存関係として不足しているため、Webpackがそのモジュールを解決できずに起こります。

1. エラーの発生条件

このエラーが発生する主な条件は以下の通りです：

• プロジェクトにsass-loaderがインストールされていない
• sass-loaderのバージョンが古いか、依存関係が正しくインストールされていない
• プロジェクトの依存関係が破損しているか、インストールが不完全

2. 必要なパッケージをインストールする

sass-loaderとSASSをVue.jsプロジェクトで使用するには、まず必要なパッケージをインストールする必要があります。以下のコマンドを実行して、sass-loaderをインストールしましょう：

npm install --save-dev sass-loader sass

3. sass-loaderのバージョンを確認する

使用しているsass-loaderのバージョンがVue.jsのバージョンと互換性があるかを確認します。npm info sass-loaderコマンドで現在のバージョンを確認できます。Vue.jsのバージョンに適したsass-loaderのバージョンを使用してください。

4. Vue CLIでのインストール

Vue CLIを使用している場合、sass-loaderはプロジェクトの設定に自動で組み込まれることが多いですが、もしエラーが発生した場合は手動でインストールを確認してください。

vue add sass

5. Webpack設定を確認する

sass-loaderのインストール後、Webpackの設定が正しく反映されているかを確認します。vue-loaderやsass-loaderが適切に設定されていない場合、エラーが発生します。

6. node_modulesの再インストール

プロジェクトの依存関係が破損している場合、node_modulesを削除して再インストールすることで解決することがあります。以下のコマンドでnode_modulesを削除し、再インストールを試みます：

rm -rf node_modules
npm install

7. package.jsonの依存関係を確認する

プロジェクトのpackage.jsonファイルにsass-loaderが含まれているか、正しいバージョンが記載されているかを確認します。もし記載されていない場合、手動で依存関係を追加する必要があります。

8. キャッシュのクリア

古いキャッシュが原因でエラーが発生することがあります。以下のコマンドを実行して、npmのキャッシュをクリアしましょう：

npm cache clean --force
npm install

9. vue.config.jsの設定を確認する

プロジェクトにvue.config.jsが存在する場合、その設定ファイルを確認し、css.loaderOptions.sassの設定が正しく記述されているかを確認します。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
}

10. 他の依存関係との競合を確認する

sass-loaderのバージョンやインストール状況が他の依存関係と競合している場合もあります。npm ls sass-loaderを実行して、依存関係の木を確認し、競合がないか調べます。

11. サーバーの再起動

パッケージをインストールした後、サーバーが再起動されていないと、変更が反映されません。サーバーを再起動して、エラーが解決されているか確認します。

npm run serve

12. 最後に確認するべきこと

上記の方法を試した後でもエラーが解決しない場合は、以下の点を再確認してください：

• すべての依存関係が正しくインストールされているか
• vue.config.jsが正しい設定になっているか
• node_modulesが正しくインストールされているか

それでも解決しない場合は、Vue.jsやsass-loaderの公式ドキュメントを確認するか、問題の発生している部分を詳細に調査する必要があります。