Webpack tidak dapat memasang masalah pemuat gaya (Vue.js 2)

Question

我需要安装style-loader以便能够加载import 'bootstrap-icons/font/bootstrap-icons.css'。然而，当我能够加载import 'bootstrap-icons/font/bootstrap-icons.css'。然而，当我输入加载玶入丯玶丯入亗玶丯入亗亗丯亗丯入亗簵/p>

npm ERR! kod ERESOLVE
npm ERR! ERESOLVE tidak dapat menyelesaikan pepohon pergantungan
npm ERR! 
npm ERR! Semasa menyelesaikan: undefined@undefined
npm ERR! Ditemui: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.41.2" daripada projek root
npm ERR! 
npm ERR! Tidak dapat menyelesaikan pergantungan:
npm ERR! peer webpack@"^5.0.0" daripada style-loader@3.3.3
npm ERR! node_modules/style-loader
npm ERR!   style-loader@"*" daripada projek root
npm ERR! 
npm ERR! Betulkan konflik pergantungan huluan, atau cuba semula
npm ERR! arahan ini dengan --force, atau --legacy-peer-deps
npm ERR! untuk menerima resolusi pergantungan yang salah (dan berpotensi rosak).
npm ERR! 
npm ERR! Lihat /Users/jessiechen/.npm/eresolve-report.txt untuk laporan penuh.

npm ERR! Log lengkap larian ini boleh didapati di:
npm ERR!     /Users/jessiechen/.npm/_logs/2023-07-16T00_15_26_704Z-debug-0.log

这是我的webpack.config.js文件。

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

module.exports = {
    mod: 'pembangunan',
    selesaikan: {
        sambungan: ['.js', '.jsx','.vue', '.css'],
        modul: [
            'node_modules'
        ]  
    },
    modul: {
        peraturan: [
            {
                ujian: /.vue?$/,
                kecualikan: /(node_modules)/,
                gunakan: 'vue-loader'
            },
            {
                ujian: /.js?$/,
                kecualikan: /(node_modules)/,
                gunakan: 'babel-loader'
            },
            {
                ujian: /.css$/i,
                gunakan: [{loader:'style-loader'}, {loader: 'css-loader'}],
            },
            {
                ujian: /.(png|jpe?g|gif)$/i,
                gunakan: [
                  {
                    pemuat: 'pemuat fail',
                    pilihan: {
                        esModul: palsu
                    }
                  },
                ],
            },
        ]
    },
    pemalam: [HtmlWebpackPlugin baharu({
        templat: './src/index.html'
    })],
    devServer: {
        historyApiFallback: benar
    },
    luaran: {
        // objek konfigurasi aplikasi global
        konfigurasi: JSON.stringify({
            apiUrl: 'http://localhost:4000'
        })
    },
}

这是我的package.json文件：

{
  "skrip": {
    "start": "webpack-dev-server --open",
    "build": "webpack --mode production"
  },
  "kebergantungan": {
    "@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",
    "laluan": "^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"
  }
}

Saya telah cuba memadamkan fail package.lock.json dan memasang semula semua pakej, tetapi saya mendapat ralat setiap kali saya cuba memasang pemuat gaya.

Answer 1

Jalankan npm install style-loader --legacy-peer-deps. Ia membantu jika anda membiasakan diri dan mempercayai mesej ralat yang dikeluarkan oleh alat itu.

Tetapi anda juga perlu mengemas kini kebergantungan anda (semak npm ketinggalan zaman). Anda mempunyai pelbagai versi pakej yang tidak serasi. Untuk mana-mana pakej yang mengalami perubahan pecah (digit paling kiri nombor versi telah berubah), anda mungkin mahu menyemak changelog pakej, yang biasanya boleh didapati dalam repositori GitHubnya atau dalam tab Keluaran.