Webデザイン

Gulp postcss Autoprefixerのブラウザ指定の書き方(エラー:Replace Autoprefixer browsers option to Browserslist config.と出た時の解決方法)

autoprefixer Webデザイン

2021年2月現在のGulp postcss Autoprefixerのブラウザ指定の書き方について備忘録メモ。
以下のエラーが出た時の解決方法になります。

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

https://github.com/postcss/autoprefixer#browsers

The best way to provide browsers is a .browserslistrc file in your project root, or by adding a browserslist key to your package.json.
ブラウザを提供する最良の方法は、プロジェクトルートに.browserslistrcファイルを作成するか、package.jsonにbrowserslistキーを追加することです。

と記載がありました。

この方法の通りにファイルを作成していると、以下のnodeツールたちもターゲットブラウザを自動的に検出するそうです。

  • Autoprefixer
  • Babel
  • postcss-preset-env
  • eslint-plugin-compat
  • stylelint-no-unsupported-browser-features
  • postcss-normalize
  • obsolete-webpack-plugin

package.jsonにbrowserslistキーを追加するか、.browserslistrcファイルを作成するかどちらかを推奨とのことなので、今回は.browserslistrcファイルを作成する方法を記載します。

テキストエディタなどでブラウザ指定を記述して、ファイル名を.browserslistrcにして保存します。

保存する場所は、gulpfile.jsやpackage.jsonと同じ階層で大丈夫です。
コメントアウトは文頭に # をつけて書いていきます。

# Browsers that we support
defaults
not IE 11
maintained node versions

https://github.com/browserslist/browserslistに記載されている使用例です。こちらをカスタマイズしてプロジェクトに応じてブラウザバージョンを追記していきます。

ちなみに...。default で指定の場合は以下のブラウザバージョンに対応しているようです。

# default
> 0.5%,
last 2 versions,
Firefox ESR,
not dead

以下は自分でカスタマイズしたブラウザ指定になります。

# カスタマイズしたブラウザ指定
last 2 versions
> 0.2%
IE >= 10 # IE10以上
Android >= 5 # Android5以上

gulp v4の書き方でgulpfile.jsを修正していたところ、overrideBrowserslistは非推奨になりエラーが出てしまいました。
以下がgulp v3当時の書き方でした。

.pipe( postcss([ autoprefixer(
{
// IEは11以上、Androidは5以上
// その他は最新2バージョンで必要なベンダープレフィックスを付与する
"overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 5"],
cascade: false}
) ]) )

autoprefixerのoptionについては以下に記載がありますのでこちらをご覧くださいませ。
https://github.com/postcss/autoprefixer#options

コメント

タイトルとURLをコピーしました