WebDesigner's Memorandumウェブデザイナーの備忘録

gulpfile.jsにAutoprefixerのブラウザオプションを書くとエラーがでる場合の修正方法

Autoprefixerのアップデートの影響で、gulpfile.jsにブラウザオプションを記述していると、下記のようなエラーが出るようになりました。

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

Using browsers option cause some error. 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のエラー

解消するためには、package.jsonにブラウザオプションを移動すればOKです。

ブラウザオプションの設定

今までgulpfile.jsに書いてあった設定をpackage.json.browserslistrcに移動すればOKです。

gulpfile.js 修正前.pipe(postcss([
  autoprefixer({
    browsers: [
      'last 2 versions',
      'Explorer >= 11',
      'iOS >= 9.0',
      'Android >= 4.1']
  })
]))

browsers:[]内の設定を切り取ります。

gulpfile.js 修正後.pipe(postcss([
  autoprefixer()
]))

あとは下記の設定はpackage.json}前にペーストします。

package.json"browserslist": [
  "last 2 versions",
  "Explorer 11"
  "iOS 9.0",
  "Android 4.1"
]

これで保存して、再度gulpを実行するとエラーが表示されなくなっているはずです。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね