Webデザイン

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

autoprefixer Webデザイン

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

Error in plugin "gulp-postcss"
Message:
PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

エラーの内容は、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のバージョンを下げなくてもエラーがなくなりました。バージョン下げるのめんどくさいぃぃという方はぜひお試しください。

comment

タイトルとURLをコピーしました