Webpack cannot install style-loader problem (Vue.js 2)

Question

我需要安装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"
  }
}

I've tried deleting the package.lock.json file and reinstalling all packages, but I get an error every time I try to install style-loader.

Answer 1

Run npm install style-loader --legacy-peer-deps. It helps if you become familiar with and trust the error messages the tool emits.

But you also need to update your dependencies (check npm outdated). You have various incompatible package versions. For any package that has had breaking changes (the leftmost digit of the version number has changed), you may want to check the changelog for that package, which can usually be found in its GitHub repository or in the Releases tab.