Migrating postcss-loader from 3.0.0 to 4.0.2 results in Error: [object Object] is not a PostCSS plugin

Question

所以今天我一直在尝试将 postscss-loader 从版本 3.0.0 迁移到 4.0.2

我注意到从 verion 4.0.0 开始他们添加了 postCSS 作为对等依赖项，所以我添加了 postcss 版本 7.0.27。我没有选择 8，因为我也使用 'postcss-import'，这依赖于版本 7。这应该没问题，因为 postcss-loader 可以同时使用版本 7 和 8。

但是现在运行我收到所有 scss 文件的相同错误消息：

Error: [object Object] is not a PostCSS plugin

由于该消息不是真正的描述性，解决问题已成为一种真正的试错法。到目前为止没有成功。

这是我的 webpack.config.ts:

import postCSSImport from 'postcss-import';
import autoPrefixerFlexbox from 'postcss-flexbugs-fixes';
import autoPrefixer from 'autoprefixer';

const BrowserList = {
    mobile: ['android >= 4', 'ios >= 8'],
    desktop: ['firefox >= 40', 'chrome >= 49', 'edge >= 12', 'opera >= 47', 'ie >= 11', 'safari >= 9'],
    designer: ['firefox >= 40', 'chrome >= 49', 'edge >= 12', 'opera >= 47', 'ie >= 11', 'safari >= 9'],
    translation: 'last 1 chrome versions'
};

module.exports = async (env, argv) => {

    const webpackConfigs = [];
 
    webpackConfigs.push({   
        module: {
            exprContextCritical: false,
            rules: [
                { // babel javascript/typescript (no type checking), also see ./babel.config.js
                    test: /\.(js|jsx|ts|tsx)$/,
                    exclude: /node_modules\/(?!@k2g)/, 
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                ['@babel/preset-env', {
                                    targets: {
                                        browsers: BrowserList[target]
                                    }
                                }]
                            ]
                        }
                    }
                },

                { // sass
                    test: /\.(scss|sass)$/,
                    exclude: /node_modules\/(?!sweetalert2)/, 
                    use: [
                        { loader: 'style-loader' }
                    ),
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: false,
                            postcssOptions: {
                                plugins: [
                                    postCSSImport(), // for @import in css
                                    autoPrefixerFlexbox,
                                    autoPrefixer({
                                        overrideBrowserslist: BrowserList[target], // target = 'desktop' 
                                        grid: true
                                    })
                                ]
                            }
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            additionalData: vars.sass, // e.g. '$url-logo: "/resources/images/logo.png";'
                            sourceMap: true,
                            sassOptions: {
                                outputStyle: 'expanded',
                                sourceMapContents: true
                            }
                        }
                    }
                ] 
            },
        }
    })
}

我在 postcss-loader 的选项中尝试了几种方法：

将执行设置为真
将 sourceMap 设置为 true
将两者设置为 false

这里是我使用的依赖项的完整版本：

Node:       v12.16.1
Webpack:    4.44.1 
Yarn:       1.22.5 
postcss:    7.0.27
css-loader: 3.6.0

您是否看到这里的问题或知道在哪里看？这将是一个帮助。

提前致谢

Answer 1

我正试图解决类似的问题。我们使用 postcss-loader@^3.0.0 和 autoprefixer@^9.7.0。在我将 postcss-loader 更新到 4.0.2 版并将 autoprefixer 更新到 10.0.0 版后，我收到了 Error: [object Object] is not a PostCSS plugin 和 true is not a PostCSS plugin.

之类的错误

然后我在 autoprefixer 仓库中发现了错误报告：https://github.com/postcss/autoprefixer/issues/1359

解决办法是使用autoprefixer@^9.7.0.，因为autoprefixer@^10.0.0还没有准备好。这解决了我的问题。

Migrating postcss-loader from 3.0.0 to 4.0.2 results in Error: [object Object] is not a PostCSS plugin

Migrating postcss-loader from 3.0.0 to 4.0.2 results in Error: [object Object] is not a PostCSS plugin

webpack

postcss

yarnpkg

postcss-loader

webpack-config