Webpack がスタイルローダーをインストールできない問題 (Vue.js 2)
<p>import 'bootstrap-icons/font/bootstrap-icons.css' を追加するには、style-loader をインストールする必要があります。ただし、npm install style-loader を入力すると、次のようなメッセージが表示されます。
<pre class="brush:php;toolbar:false;">npm エラー!コード ERESOLVE
npmエラー! ERESOLVE が依存関係ツリーを解決できません
npmエラー!
npmエラー!解決中: unknown@unknown
npmエラー!見つかりました: webpack@4.46.0
npmエラー!ノードモジュール/webpack
npmエラー!ルート プロジェクトからの dev webpack@"^4.41.2"
npmエラー!
npmエラー!依存関係を解決できませんでした:
npmエラー!ピア webpack@"^5.0.0" (style-loader@3.3.3 から)
npmエラー!ノードモジュール/スタイルローダー
npmエラー!ルート プロジェクトの style-loader@"*"
npmエラー!
npmエラー!上流の依存関係の競合を修正するか、再試行してください
npmエラー!このコマンドには --force または --legacy-peer-deps を指定します
npmエラー!間違った (そして壊れている可能性がある) 依存関係の解決を受け入れること。
npmエラー!
npmエラー!完全なレポートについては、/Users/jessiechen/.npm/eresolve-report.txt を参照してください。
npmエラー!この実行の完全なログは、次の場所にあります。
npmエラー! /Users/jessiechen/.npm/_logs/2023-07-16T00_15_26_704Z-debug-0.log</pre>
<p>これは私たちのwebpack.config.jsファイルです。</p>
<pre class="brush:php;toolbar:false;">var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
モード: '開発'、
解決する： {
拡張子: ['.js'、'.jsx'、'.vue'、'.css']、
モジュール: [
'node_modules'
】
}、
モジュール: {
ルール: [
{
テスト: /.vue?$/,
除外: /(node_modules)/,
使用: 'vue-loader'
}、
{
テスト: /.js?$/、
除外: /(node_modules)/,
使用:「バベルローダー」
}、
{
テスト: /.css$/i、
使用: [{loader:'style-loader'}, {loader:'css-loader'}],
}、
{
テスト: /.(png|jpe?g|gif)$/i,
使用： [
{
ローダー: 'ファイルローダー',
オプション: {
esモジュール: false
}
}、
]、
}、
】
}、
プラグイン: [new HtmlWebpackPlugin({
テンプレート: './src/index.html'
})]、
開発サーバー: {
HistoryApiFallback: true
}、
外観: {
// グローバルアプリ構成オブジェクト
設定: JSON.stringify({
APIUrl: 'http://localhost:4000'
})
}、
}</pre>
<p>これは我のpackage.json文件：</p>
<pre class="brush:php;toolbar:false;">{
"スクリプト": {
"start": "webpack-dev-server --open",
"ビルド": "webpack --mode プロダクション"
}、
"依存関係": {
"@babel/runtime": "^7.22.6",
"ブートストラップ": "^5.3.0",
"ブートストラップアイコン": "^1.10.5",
"regenerator-ランタイム": "^0.13.11",
"vee-validate": "^2.2.8",
"vue": "^2.6.10",
"vue-ルーター": "^3.1.3",
"vuex": "^3.1.2",
"xlsx": "^0.18.5"
}、
"devDependency": {
"@babel/plugin-transform-runtime": "^7.22.7",
"バベルコア": "^6.26.0",
"バベルローダー": "^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",
"ファイルローダー": "^6.2.0",
"html-webpack-plugin": "^3.2.0",
"パス": "^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"
}
}</pre>
<p>package.lock.json ファイルを削除し、すべてのパッケージを再インストールしようとしましたが、style-loader をインストールしようとするたびにエラーが発生します。 </p>
