PostCSS plugin autoprefixer requires PostCSS 8のエラーの対処法

autoprefixer requires PostCSS 8とは

autoprefixerにはPostCSS 8が必要だというエラー。

autoprefixerはCSSのベンダープレフィックスを自動付与するもので、PostCSSはCSSをコンパイルするためのものです。

最近autoprefixerとPostCSSを使用しているとこのエラーが出るケースがある。

エラーの対処法

対処法は使用環境などによって異なり、主な対処法は以下の通り。

Webpack

1. postcss-loaderをバージョン4.0.3以上にアップデート
2. プロジェクトにpostcssの依存関係をバージョン8.1以上で追加

CLI

1. postcss-cliを8.0以上にアップデート
2. プロジェクトにpostcssの依存関係を追加

Gulp

1. gulp-postcssを9.0以上にアップデート
2. プロジェクトにpostcssの依存関係を追加

Next.js

Next.jsをバージョン10以上にアップデート

Nuxt.js

1. nuxtをバージョン2.15.3以上にアップデート
2. nuxt/postcss8 モジュールを使用する

Parcel

yarn add -D parcel@nightlyでインストールして使用する

autoprefixerをダウングレードする対処法

autoprefixerをバージョン9にダウングレードする対処法でもエラーを回避することができる。

以下のコマンドを実行するとautoprefixerをダウングレードできる。

npm un autoprefixer && npm i -D autoprefixer@^9