如何解决将postcss-loader从3.0.0迁移到4.0.2会导致错误:[object Object]不是PostCSS插件
所以今天我一直在尝试将postcss-loader从版本3.0.0迁移到4.0.2
我注意到从版本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',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的选项中尝试了几件事:
- 将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
您在这里看到问题还是知道在哪里看? 这会有所帮助。
预先感谢
解决方法
我正试图解决类似的问题。我们使用带有autoprefixer@^9.7.0的postcss-loader@^3.0.0。在将postcss-loader更新为4.0.2版并将自动前缀更新为10.0.0版之后,我收到了诸如Error: [object Object] is not a PostCSS plugin
和true is not a PostCSS plugin
之类的错误。
然后我在自动前缀程序存储库中发现了错误报告:https://github.com/postcss/autoprefixer/issues/1359
解决方案是使用autoprefixer@^9.7.0。,因为autoprefixer@^10.0.0尚未准备好。这解决了我的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。