将postcss-loader从3.0.0更新到4.1.0后，webpack.code构建中断

Question

我使用的是最新的CkEditor 5和postcss-loader的最新版本的webpack 4(不是5)。当我使用postcss-loader 3.0.0时，一切都很好。在将其更新到4.1.0之后，我收到了以下错误消息：

"ValidationError:无效的options对象。已使用与PostCSS架构不匹配的options对象初始化了API。options具有未知的属性‘plugins’。“

我的webpack.config是：

        {
            stats: {
                modules: false
            },
            context: __dirname,
            entry: {
                shopApp: [
                    './node_modules/zooming/build/zooming.min.js',
                    jsRoot + 'shop/index.js'
                ]
            },
            output: {
                path: path.join(__dirname, wwwroot + 'dist/js'),
                filename: '[name].min.js',
                chunkFilename: '[name].[chunkhash].min.js',
                publicPath: '/dist/js/'
            },
            module: {
                rules: [
                    {
                        test: /\.js$/,
                        loader: 'babel-loader?cacheDirectory=true',
                        exclude: file => /node_modules/.test(file),
                        query: {
                            presets: [
                                [
                                    "@babel/preset-env",
                                    {
                                        targets: "> 2% and last 2 versions"
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        test: /\.svg$/,
                        use: [ 'raw-loader' ]
                    },
                    {
                        test: /\.css$/,
                        use: [
                            {
                                loader: 'style-loader',
                                options: {
                                    injectType: 'singletonStyleTag',
                                    attributes: {
                                        'data-cke': true
                                    }
                                }
                            },
                            {
                                loader: 'postcss-loader',
                                options: styles.getPostCssConfig( {
                                    themeImporter: {
                                        themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                    },
                                    minify: true
                                } )
                            }
                        ]
                    }
                ]
            },
            devtool: isDevBuild ? 'eval-source-map' : false,
            plugins: [
                new Webpack.DefinePlugin({
                    'process.env': {
                        NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
                    }
                }),
                new CKEditorWebpackPlugin( {
                    // When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor-webpack.js).
                    language: 'en',
                    addMainLanguageTranslationsToAllAssets: true
                })
            ]
        }

所以，是的，我有插件，但这是必须的。我甚至不知道插件和postcss-loader 4.1.0有什么问题。

请多多指教！

Answer 1

postcss-loader v4有许多突破性的变化https://github.com/webpack-contrib/postcss-loader/releases/tag/v4.0.0。

例如,

PostCSS (插件/语法/解析器/stringifier)选项已移至postcssOptions选项

我相信将该styles.getPostCssConfig传递给postcssOptions有望解决您的问题：

loader: 'postcss-loader',
options: {
  postcssOptions: styles.getPostCssConfig({})
}