Webpack がスタイルローダーをインストールできない問題 (Vue.js 2)

Question

import 'bootstrap-icons/font/bootstrap-icons.css' を追加するには、style-loader をインストールする必要があります。ただし、npm install style-loader を入力すると、次のようなメッセージが表示されます。

npm エラー!コード ERESOLVE
npmエラー! ERESOLVE が依存関係ツリーを解決できません
npmエラー!
npmエラー!解決中: unknown@unknown
npmエラー!見つかりました: webpack@4.46.0
npmエラー!ノードモジュール/webpack
npmエラー!ルート プロジェクトからの dev webpack@"^4.41.2"
npmエラー!
npmエラー!依存関係を解決できませんでした:
npmエラー!ピア webpack@"^5.0.0" (style-loader@3.3.3 から)
npmエラー!ノードモジュール/スタイルローダー
npmエラー!ルート プロジェクトの style-loader@"*"
npmエラー!
npmエラー!上流の依存関係の競合を修正するか、再試行してください
npmエラー!このコマンドには --force または --legacy-peer-deps を指定します
npmエラー!間違った (そして壊れている可能性がある) 依存関係の解決を受け入れること。
npmエラー!
npmエラー!完全なレポートについては、/Users/jessiechen/.npm/eresolve-report.txt を参照してください。

npmエラー!この実行の完全なログは、次の場所にあります。 
npmエラー! /Users/jessiechen/.npm/_logs/2023-07-16T00_15_26_704Z-debug-0.log

これは私たちのwebpack.config.jsファイルです。

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    モード: '開発'、
    解決する： {
        拡張子: ['.js'、'.jsx'、'.vue'、'.css']、
        モジュール: [
            'node_modules'
        】
    }、
    モジュール: {
        ルール: [
            {
                テスト: /.vue?$/,
                除外: /(node_modules)/,
                使用: 'vue-loader'
            }、
            {
                テスト: /.js?$/、
                除外: /(node_modules)/,
                使用:「バベルローダー」
            }、
            {
                テスト: /.css$/i、
                使用: [{loader:'style-loader'}, {loader:'css-loader'}],
            }、
            {
                テスト: /.(png|jpe?g|gif)$/i,
                使用： [
                  {
                    ローダー: 'ファイルローダー',
                    オプション: {
                        esモジュール: false
                    }
                  }、
                ]、
            }、
        】
    }、
    プラグイン: [new HtmlWebpackPlugin({
        テンプレート: './src/index.html'
    })]、
    開発サーバー: {
        HistoryApiFallback: true
    }、
    外観: {
        // グローバルアプリ構成オブジェクト
        設定: JSON.stringify({
            APIUrl: 'http://localhost:4000'
        })
    }、
}

これは我のpackage.json文件：

{
  "スクリプト": {
    "start": "webpack-dev-server --open",
    "ビルド": "webpack --mode プロダクション"
  }、
  "依存関係": {
    "@babel/runtime": "^7.22.6",
    "ブートストラップ": "^5.3.0",
    "ブートストラップアイコン": "^1.10.5",
    "regenerator-ランタイム": "^0.13.11",
    "vee-validate": "^2.2.8",
    "vue": "^2.6.10",
    "vue-ルーター": "^3.1.3",
    "vuex": "^3.1.2",
    "xlsx": "^0.18.5"
  }、
  "devDependency": {
    "@babel/plugin-transform-runtime": "^7.22.7",
    "バベルコア": "^6.26.0",
    "バベルローダー": "^7.1.5",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-vue": "^2.0.2",
    "css-loader": "^3.3.2",
    "ファイルローダー": "^6.2.0",
    "html-webpack-plugin": "^3.2.0",
    "パス": "^0.12.7",
    "vue-loader": "^14.2.3",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

package.lock.json ファイルを削除し、すべてのパッケージを再インストールしようとしましたが、style-loader をインストールしようとするたびにエラーが発生します。

Answer 1

npm install style-loader --legacy-peer-deps を実行します。ツールが出力するエラー メッセージを理解し、信頼できるようになると役に立ちます。

ただし、依存関係を更新する必要もあります (npm が古いことを確認してください)。互換性のないさまざまなパッケージ バージョンがあります。重大な変更が加えられたパッケージ (バージョン番号の左端の桁が変更されたもの) については、そのパッケージの変更ログを確認してください。変更ログは通常、GitHub リポジトリまたは [リリース] タブにあります。