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のタスクを試してみると、エラーが出なくなりました。
コメントが承認されるまで時間がかかります。