webpack無法安裝style-loader問題（Vue.js 2）

Question

<p>我需要安裝style-loader才能載入import 'bootstrap-icons/font/bootstrap-icons.css'。但是，當我輸入npm install style-loader時，出現以下錯誤：</p>

np​​m 錯誤！代碼 ERESOLVE
npm 錯誤！ ERESOLVE 無法解析依賴關係樹
npm 錯誤！
npm 錯誤！解析時：undefined@undefined
npm 錯誤！發現：webpack@4.46.0
npm 錯誤！節點模組/webpack
npm 錯誤！根項目中的 dev webpack@"^4.41.2"
npm 錯誤！
npm 錯誤！無法解決依賴關係：
npm 錯誤！來自 style-loader@3.3.3 的對等 webpack@"^5.0.0"
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</pre>
<p>這是我的webpack.config.js檔。</p>
var HtmlWebpackPlugin = require('html-webpack-plugin');

模組. 導出 = {
    模式：“開發”，
    解決： {
        副檔名: ['.js', '.jsx', '.vue', '.css'],
        模組：[
            '節點模組'
        ]
    },
    模組： {
        規則：[
            {
                測試：/.vue?$/,
                排除：/(node_modules)/,
                使用：'vue-loader'
            },
            {
                測試：/.js?$/,
                排除：/(node_modules)/,
                使用：'babel-loader'
            },
            {
                測試：/.css$/i，
                使用：[{loader:'style-loader'}, {loader:'css-loader'}],
            },
            {
                測試：/.(png|jpe?g|gif)$/i,
                使用： [
                  {
                    loader: '檔案載入器',
                    選項： {
                        es模組：假
                    }
                  },
                ],
            },
        ]
    },
    插件：[新的 HtmlWebpackPlugin({
        模板：'./src/index.html'
    })],
    開發伺服器：{
        歷史記錄ApiFallback：true
    },
    外部：{
        // 全域應用程式配置對象
        設定： JSON.stringify({
            apiUrl: 'http://localhost:4000'
        })
    },
}</pre>
<p>這是我的package.json檔案：</p>
{
  「腳本」：{
    “開始”：“webpack-dev-server --open”，
    "build": "webpack --模式生產"
  },
  「依賴項」：{
    "@babel/runtime": "^7.22.6",
    "引導程式": "^5.3.0",
    "bootstrap-icons": "^1.10.5",
    "再生器運轉時": "^0.13.11",
    "vee-validate": "^2.2.8",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.22.7",
    "babel-core": "^6.26.0",
    "babel-loader": "^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",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^3.2.0",
    "path": "^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"
  }
}</pre>
<p>我已經嘗試刪除package.lock.json檔案並重新安裝所有的套件，但是每次我嘗試安裝style-loader時都會出現錯誤。 </p>            

Answer 1

運行npm install style-loader --legacy-peer-deps。如果你能夠熟悉並信任工具發出的錯誤訊息，這將對你很有幫助。

但你也需要更新你的依賴項（檢查npm outdated）。你有各種不相容的套件版本。對於任何有重大變化的套件（版本號碼最左邊的數位變化），你可能需要查看該套件的變更日誌，通常可以在其GitHub倉庫或Releases標籤中找到。

#