autoprefixerのブラウザのバージョン指定でエラーが出る場合の対応

autoprefixerを使ってSassのコンパイルを行う際、少し前からエラーメッセージが表示されるようになったので、対応方法をメモ。

対応前

まずは対応前の状態を確認してみます。
今回はgulp、gulp-sass、autoprefixer、gulp-postcssをインストールして使用します。

gulpfile.jsの指定は以下のようにします。

gulpfile.js

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

gulp.task('sass', function () {
  return gulp.src(['./_src/sass/**/*.scss', '!./_src/sass/**/_*.scss'])
  .pipe(sass({
    outputStyle : 'expanded'
  }))
  .pipe(postcss([
    autoprefixer({browsers: ['last 2 versions']})
  ]))
  .pipe(gulp.dest('assets/css/'));
});

ブラウザのバージョン指定は「last 2 versions」にしています。
次にSassファイルを用意します。

style.scss

.flex {
  display: flex;
}
.transform {
  transform: scale(1.5);
}

これで準備が完了しましたので、下記コマンドを実行してSassファイルをコンパイルします。

gulp sass

コンパイル自体は成功して、以下のようなファイルが生成されました。

style.css

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.transform {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

ただ、コンパイル時に以下のようなエラーメッセージが表示されていました。

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

autoprefixerのブラウザ指定をgulpfile.jsからpackage.jsonまたは.browserslistrcというファイルに変更する必要があるようです。

package.jsonへの変更

ブラウザ指定をgulpfile.jsからpackage.jsonに変更してみます。
まずはgulpfile.jsから指定を削除します。

gulpfile.js

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

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

package.jsonに “browserslist”: [“指定1”, “指定2”] のような形で指定します。

package.json

{
  "name": "sample",
  "version": "1.0.0",
  〜 略 〜
  "browserslist": [
    "last 2 versions"
  ]
}

Sassのコンパイルを再度実行すると、先ほどと同じ内容にコンパイルできました。

.browserslistrcへの変更

次に.browserslistrcへの変更です。
先ほどと同様にgulpfile.jsから指定を削除した上で、.browserslistrcというファイルをプロジェクトルートに作成して、以下のように記述します。

.browserslistrc

# autoprefixerのブラウザ指定
last 2 versions

行頭に#をつけるとコメントアウトになります。
Sassのコンパイルを再度実行すると、先ほどと同じ内容になりました。