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

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

対応前

使用していたバージョンは autoprefixer v10.0.2、gulp-postcss v9.0.0です。
gulpfile.jsの内容は以下になります。

var gulp = require('gulp'),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer');

gulp.task('sass', function () {
  var plugins = [
    autoprefixer(),
  ];
  return gulp.src(['./_src/sass/**/*.scss', '!./_src/sass/**/_*.scss'])
  .pipe(plumber())
  .pipe(sass({
    outputStyle : 'compact'
  }))
  .pipe(postcss(plugins))
  .pipe(gulp.dest('assets/css/'));
});

sassのタスクを実行した際に、以下のようなエラーが出ました。

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を使用するようにアップデートされていないためエラーになるようです。
取り急ぎの対応として、autoprefixerのバージョンを9系にすることで回避できます。

autoprefixerを一旦アンインストールします。

npm uninstall autoprefixer --save-dev

バージョンを指定して再度インストールします。

npm install autoprefixer@9.8.6 --save-dev

今回は9系の最新を指定しましたが、バージョンは必要に応じて変更ください。
autoprefixerのバージョン一覧

再度sassのタスクを試してみると、エラーが出なくなりました。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31