Webpack ne peut pas installer le problème du chargeur de style (Vue.js 2)

Question

p>

npm ERR ! code ERESOLVE
npm ERR ! ERESOLVE incapable de résoudre l'arborescence des dépendances
npm ERR ! 
npm ERR ! Lors de la résolution : undéfini@undéfini
npm ERR ! Trouvé : webpack@4.46.0
npm ERR ! node_modules/webpack
npm ERR !   dev webpack@"^4.41.2" du projet racine
npm ERR ! 
npm ERR ! Impossible de résoudre la dépendance :
npm ERR ! peer webpack@"^5.0.0" de style-loader@3.3.3
npm ERR ! node_modules/style-loader
npm ERR !   style-loader@"*" du projet racine
npm ERR ! 
npm ERR ! Résolvez le conflit de dépendances en amont ou réessayez
npm ERR ! cette commande avec --force ou --legacy-peer-deps
npm ERR ! pour accepter une résolution de dépendance incorrecte (et potentiellement cassée).
npm ERR ! 
npm ERR ! Voir /Users/jessiechen/.npm/eresolve-report.txt pour un rapport complet.

npm ERR ! Un journal complet de cette exécution peut être trouvé dans :
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 : 'développement',
    résoudre: {
        extensions : ['.js', '.jsx', '.vue', '.css'],
        modules: [
            'noeud_modules'
        ]  
    },
    module : {
        règles: [
            {
                test : /.vue?$/,
                exclure : /(node_modules)/,
                utiliser : 'vue-loader'
            },
            {
                test : /.js?$/,
                exclure : /(node_modules)/,
                utiliser : 'babel-loader'
            },
            {
                tester : /.css$/i,
                utilisez : [{loader:'style-loader'}, {loader: 'css-loader'}],
            },
            {
                test : /.(png|jpe?g|gif)$/i,
                utiliser: [
                  {
                    chargeur : 'chargeur de fichiers',
                    options : {
                        esModule : faux
                    }
                  },
                ],
            },
        ]
    },
    plugins : [nouveau HtmlWebpackPlugin({
        modèle : './src/index.html'
    })],
    serveur de développement : {
        historyApiFallback : vrai
    },
    externes : {
        // objet de configuration globale de l'application
        configuration : JSON.stringify({
            apiUrl : 'http://localhost:4000'
        })
    },
}
这是我的package.json文件：
{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --mode production"
  },
  "dépendances": {
    "@babel/runtime": "^7.22.6",
    "bootstrap": "^5.3.0",
    "icônes d'amorçage": "^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"
  },
  "dépendances dev": {
    "@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",
    "chargeur de fichiers": "^6.2.0",
    "html-webpack-plugin": "^3.2.0",
    "chemin": "^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"
  }
}
J'ai essayé de supprimer le fichier package.lock.json et de réinstaller tous les packages, mais j'obtiens une erreur à chaque fois que j'essaie d'installer style-loader. 
            

Answer 1

Exécutez npm install style-loader --legacy-peer-deps. Il est utile de se familiariser avec les messages d'erreur émis par l'outil et de leur faire confiance.

Mais vous devez également mettre à jour vos dépendances (vérifiez npm obsolète). Vous disposez de plusieurs versions de package incompatibles. Pour tout package ayant subi des modifications importantes (le chiffre le plus à gauche du numéro de version a changé), vous souhaiterez peut-être consulter le journal des modifications de ce package, qui se trouve généralement dans son référentiel GitHub ou dans l'onglet Releases.