Webpack kann kein Style-Loader-Problem installieren (Vue.js 2)

Question

我需要安装style-loader以便能够加载import 'bootstrap-icons/font/bootstrap-icons.css' p>

npm ERR! Code ERESOLVE
npm ERR! ERESOLVE konnte den Abhängigkeitsbaum nicht auflösen
npm ERR! 
npm ERR! Beim Auflösen: undefiniert@undefiniert
npm ERR! Gefunden: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.41.2" aus dem Root-Projekt
npm ERR! 
npm ERR! Abhängigkeit konnte nicht aufgelöst werden:
npm ERR! Peer-Webpack@"^5.0.0" von style-loader@3.3.3
npm ERR! node_modules/style-loader
npm ERR!   style-loader@"*" aus dem Root-Projekt
npm ERR! 
npm ERR! Beheben Sie den Upstream-Abhängigkeitskonflikt oder versuchen Sie es erneut
npm ERR! Führen Sie diesen Befehl mit --force oder --legacy-peer-deps aus
npm ERR! eine falsche (und möglicherweise fehlerhafte) Abhängigkeitsauflösung zu akzeptieren.
npm ERR! 
npm ERR! Einen vollständigen Bericht finden Sie unter /Users/jessiechen/.npm/eresolve-report.txt.

npm ERR! Ein vollständiges Protokoll dieses Laufs finden Sie in:
npm ERR!     /Users/jessiechen/.npm/_logs/2023-07-16T00_15_26_704Z-debug-0.log

Wird die Datei webpack.config.js heruntergeladen.

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

module.exports = {
    Modus: 'Entwicklung',
    lösen: {
        Erweiterungen: ['.js', '.jsx', '.vue', '.css'],
        Module: [
            'node_modules'
        ]  
    },
    Modul: {
        Regeln: [
            {
                test: /.vue?$/,
                ausschließen: /(node_modules)/,
                Verwendung: 'vue-loader'
            },
            {
                test: /.js?$/,
                ausschließen: /(node_modules)/,
                verwenden: 'babel-loader'
            },
            {
                test: /.css$/i,
                verwenden: [{loader:'style-loader'}, {loader: 'css-loader'}],
            },
            {
                test: /.(png|jpe?g|gif)$/i,
                verwenden: [
                  {
                    Loader: 'Datei-Loader',
                    Optionen: {
                        esModule: false
                    }
                  },
                ],
            },
        ]
    },
    Plugins: [neues HtmlWebpackPlugin({
        Vorlage: './src/index.html'
    })],
    devServer: {
        HistoryApiFallback: wahr
    },
    Externe: {
        // globales App-Konfigurationsobjekt
        config: JSON.stringify({
            apiUrl: 'http://localhost:4000'
        })
    },
}

这是我的package.json文件:

{
  "Skripte": {
    „start“: „webpack-dev-server --open“,
    „build“: „webpack --mode Production“
  },
  "Abhängigkeiten": {
    „@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“
  }
}

Ich habe versucht, die Datei package.lock.json zu löschen und alle Pakete neu zu installieren, aber ich erhalte jedes Mal eine Fehlermeldung, wenn ich versuche, Style-Loader zu installieren.

Answer 1

运行npm install style-loader --legacy-peer-deps。如果你能够熟悉并信任工具发出的错误消息，这将对你很有帮助。

但你也需要更新你的依赖项（检查npm outdated）。你有各种不兼容的包版本。对于任何有重大变化的包（版本号最左边的数字变化），你可能需要查看该包的变更日志，通常可以在其GitHub仓库或Releases标签中找到。