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

<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标签中找到。