Autoprefixer + gulp-postcssでPostCSS plugin autoprefixer requires PostCSS 8.とエラーが出た時の解決方法

gulp3 → gulp4へ移行作業をしていた際に出たエラーの解決方法です。

エラーの内容は、autoprefixer v10以降ではPostCSS v8が必要になるのですが、gulp-postcssがPostCSS v8を使用するようにアップデートされていないためエラーになるようです。

エラーが出ていた際の各プラグインのバージョンはこんな感じでした。

• gulp CLI バージョン：2.3.0
• gulp ローカルバージョン：4.0.2
• autoprefixer ：10.2.4
• gulp-postcss：9.0.0
• postcss：7.0.35

私の場合、PostCSSのバージョンが7系だったため、単純に8系の最新のものをダウンロードしなおしました。

• gulp CLI バージョン：2.3.0
• gulp ローカルバージョン：4.0.2
• autoprefixer ：10.2.4
• gulp-postcss：9.0.0
• postcss ：8.2.6

以上の状態でタスクを走らせたところエラーが消えました。

他の解決方法として、autoprefixerのバージョンを9系に戻す方法もあるみたいです。

autoprefixer + gulp-postcssでPostCSS plugin autoprefixer requires PostCSS 8.とエラーが出た時の対応方法

gulpでプラグインのバージョンをアップデートして使用した際、タイトルのようなエラーが出たので対応方法をメモ。対応前使用していたバージョンは a

cly7796.net

【gulp エラー】Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin. - Qiita

エラーが発生した状況npm で autoprefixer を v9 から v10 にアップデートし、gulp のCSSタスク(postcss関連含む)を走らせた時に発生原因autoprefix…

qiita.com

こちらの記事が書かれてから日がたっているので、autoprefixerのバージョンを下げなくてもエラーがなくなりました。バージョン下げるのめんどくさいぃぃという方はぜひお試しください。