無法在我的專案中安裝mini-css-extract插件

我正在嘗試安裝npm install --save mini-css-extract-plugin css-loader，但我的webpack出現了這個錯誤，誰能幫助我解決這個問題？是webpack版本還是node_modules？

package.json

"devDependencies"/span>: {
    "postcss-loader"/span>: "^3.0.0",
    "raw-loader": "^4.0.1",
    "style-loader": "^1.2.1",
    "terser-webpack-plugin": "^3.0.2",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11".
    }

錯誤

npm ERR! code ERESOLVE>
npm ERR! ERESOLVE 無法決議依賴樹
npm ERR! 
npm ERR! While resolving: @ckeditor/ckeditor5-build-decoupled-document@24.0.0
npm ERR! 發現: webpack@4.46.0!
npm ERR! node_modules/webpack
npm ERR! dev webpack@"^4.43.0" from根專案
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.0. 0" from mini-css-extract-plugin@2.3.0!
npm ERR! node_modules/mini-css-extract-plugin
npm ERR! mini-css-extract-plugin@"*" from the root project
npm ERR! 
npm ERR! 修復上游依賴性沖突，或重試
npm ERR! this命令 with --force, or --legacy-peer-deps
npm ERR！接受一個不正確的（和可能被破壞的）依賴決議。

UPDATE: webpack.config.js

const path = require( 'path' ) 。
const webpack = require( 'webpack' ) 。
const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' ) 。
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' ) 。
const TerserPlugin = require( 'teser-webpack-plugin' ) 。

module.exports = {
    devtool: 'source-map',
    performance: { hints: false }。

    entry: path.resolve( __dirname, 'src', 'ckeditor.js' ) 。

    output: {
        //編輯器的名字將被匯出。。
        library: 'DecoupledEditor'。

        path: path.resolve( __dirname, 'build' ) 。
        filename: 'ckeditor.js'。
        libraryTarget: 'umd',
        libraryExport: 'default'.
    },

    optimization: {
        minimizer: [
            new TerserPlugin( {
                sourceMap: true,
                terserOptions: {
                    output: {
                        //Preserve CKEditor 5 license comments.
                        comments: /^!
                    }
                },
                extractComments: falseplugins: [
        new CKEditorWebpackPlugin( {
            // UI語言。語言代碼遵循https://en.wikipedia.org/wiki/ISO_639-1 的格式。。
            //當改變內置語言時，記得也要在編輯器的配置（src/ckeditor.js）中改變它。
            language。'en'。
            additionalLanguages: 'all': 'all'.
        } ),
        new webpack.BannerPlugin( {
            banner: bundler.getLicenseBanner() 。
            raw: true。
        } )
    ],

    module: {
        rules: [
            {
                test: /.svg$/,
                使用。['raw-loader'].
            },
            {
                test: /.css$/,
                使用: [
                    {
                        loader: 'style-loader'。
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true。
                            }
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: styles.getPostCssConfig( {
                            themeImporter: {
                                themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark'/span> )
                            },
                            minify: true minify.
                        } )
                    }
                ]
            }
        ]
    }
};

uj5u.com熱心網友回復：

MiniCssExtractPlugin需要webpack 5才能作業。

從版本2.0.0開始，最小支持的webpack版本是5.0.0

作為一種選擇，您可以嘗試使用MiniCssExtractPlugin 版本1.6.2。 也可以考慮升級到webpack5，但是raw-loader插件以及terser-webpack-plugin已經被廢棄了。

標籤：

上一篇：當我使用``npmrundev``命令時，我得到這些錯誤。

下一篇：計算一個點的哪一邊是另一個點的位置