将postpass加载程序从3.0.0迁移到4.0.2会导致错误:[object object]不是postcss插件

Question

所以今天我一直在尝试将postscss加载程序从3.0.0版本迁移到4.0.2版本

我注意到，自从verion 4.0.0以来，他们添加了postCSS作为对等依赖，所以我添加了postCSS版本7.0.27。我没有选择8，因为我也使用"postpass导入"，这依赖于版本7。这应该是可以的，因为postpass加载程序可以同时使用版本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
}
}
}
] 
},
}
})
}

我在postpass加载程序的选项中尝试了几件事：

• 将execute设置为true
• 将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

我试图解决类似的问题。我们使用的是postpass加载程序@^3.0.0和autoprefixer@^9.7.0。在我将postpass-loader更新到4.0.2版本，将autoprefixer更新到10.0.0版本后，我收到了类似Error: [object Object] is not a PostCSS plugin和true is not a PostCSS plugin的错误。

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

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