Vue.js 2项目安装style-loader遇webpack依赖冲突问题

我需要安装style-loader来加载import 'bootstrap-icons/font/bootstrap-icons.css'，但执行npm install style-loader时出现如下错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.41.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.0.0" from style-loader@3.3.3
npm ERR! node_modules/style-loader
npm ERR!   style-loader@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/jessiechen/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jessiechen/.npm/_logs/2023-07-16T00_15_26_704Z-debug-0.log

我的webpack.config.js文件：

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

module.exports = {
    mode: 'development',
    resolve: {
        extensions: ['.js', '.jsx','.vue', '.css'],
        modules: [
            'node_modules'
        ]  
    },
    module: {
        rules: [
            {
                test: /\.vue?$/,
                exclude: /(node_modules)/,
                use: 'vue-loader'
            },
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/i,
                use: [{loader:'style-loader'}, {loader: 'css-loader'}],
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                        esModule: false
                    }
                  },
                ],
            },
        ]
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    })],
    devServer: {
        historyApiFallback: true
    },
    externals: {
        // global app config object
        config: JSON.stringify({
            apiUrl: 'http://localhost:4000'
        })
    },
}

package.json文件：

{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "@babel/runtime": "^7.22.6",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5",
    "regenerator-runtime": "^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时仍弹出该错误。

错误核心是版本不兼容：你当前用的是webpack@4.46.0，但默认安装的style-loader@3.3.3要求的 peer 依赖是webpack@^5.0.0，两者版本不匹配导致依赖树解析失败。

有两种可行解决方法：

方法1：安装兼容webpack4的style-loader版本 #

直接指定安装支持webpack4的style-loader版本（推荐^2.0.0系列），执行命令：

npm install style-loader@^2.0.0 --save-dev

方法2：跳过peer依赖校验 #

如果不想调整版本，可在安装时添加--legacy-peer-deps参数，跳过npm的peer依赖冲突检查：

npm install style-loader --save-dev --legacy-peer-deps

验证 #

安装完成后，运行npm start启动项目，确认bootstrap-icons的样式能正常加载即可。

内容的提问来源于stack exchange，提问作者Freedom Trail