gulp-postcss の autoprefixer エラーの解決方法

エラーの発生状況

gulp-postcss で autoprefixer のバージョン v10 以上を利用するとエラーが発生。

Error: PostCSS plugin autoprefixer requires PostCSS 8.

エラーの原因

• autoprefixer のバージョン v10 以上は postcss のバージョン v8 以上が必要なため
• gulp-postcss が依存している postcss のバージョンが v7 のため

エラーの解決方法

エラーメッセージを確認するとURLが表示されています。

Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

リンクをクリックすると PostCSS 8 for end users というページが表示され、様々な利用シーンでの解決方法が記載されています。

Gulp の場合は以下となります。

この記述によると

1. gulp-postcss のバージョンを v9 以上にする
2. postcss をインストールする

というわけで、指示どおりインストールします。

npm i [email protected] postcss -D

これでエラーが表示されなくなりました！