我需要安裝style-loader才能載入import 'bootstrap-icons/font/bootstrap-icons.css'。但是,當我輸入npm install style-loader時,出現以下錯誤:
npm 錯誤!代碼 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
這是我的webpack.config.js檔。
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' }) }, }
這是我的package.json檔案:
{ 「腳本」:{ “開始”:“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" } }
我已經嘗試刪除package.lock.json檔案並重新安裝所有的套件,但是每次我嘗試安裝style-loader時都會出現錯誤。
運行npm install style-loader --legacy-peer-deps。如果你能夠熟悉並信任工具發出的錯誤訊息,這將對你很有幫助。
但你也需要更新你的依賴項(檢查npm outdated)。你有各種不相容的套件版本。對於任何有重大變化的套件(版本號碼最左邊的數位變化),你可能需要查看該套件的變更日誌,通常可以在其GitHub倉庫或Releases標籤中找到。
#