2021年２月現在のGulp postcss Autoprefixerのブラウザ指定の書き方について備忘録メモ。
以下のエラーが出た時の解決方法になります。
https://github.com/postcss/autoprefixer#browsers
The best way to provide browsers is a.browserslistrcfile in your project root, or by adding abrowserslistkey to yourpackage.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 versionshttps://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については以下に記載がありますのでこちらをご覧くださいませ。
comment