対象読者
Nuxt.jsを使っていてautoprefixの対象ブラウザ設定を変更したい人
結論
package.jsonに Browserslist をするか .browserslistrc を設定する
"browserslist": [
"> 1%",
"last 3 versions",
"ie >= 11",
"android >= 4.2",
"ios >= 9"
]
...
以上！
経緯
まずぐぐりまくった
ぐぐってみた感じではnuxt.config.jsでpostcssの設定を上書き/追加して対応していた。
ただ、なんかsass使っていた場合ビルドが上手くいかなくなった
Nuxtの中では何で行われているのかを調べてみた
最終的にはこのpostcssの設定ファイルに到達した。
特にautoprefixer単体のパッケージは恐らく使っていなくて、postcss-cssnextに内包されているものを使用していて、さらにはデフォルト設定だと思われます。
デフォルト設定は公式にあるとおり下記の設定になっていると思われます。
(default: browserslist default > 1%, last 2 versions, Firefox ESR, Opera 12.1)
postcss-cssnextの設定方法を調べた
上記の公式を見たところ
Browserslist will automatically try to find a browserslist config file or use its default value.
と書かれているので browserslist config file を追うと borwserslistのGithub に到達する。
Browserslist Example shows how every tool uses Browserslist. All tools will find target browsers automatically, when you add the following to package.json:
{
"browserslist": [
"> 1%",
"IE 10"
]
}
Or in .browserslistrc config:
# Browsers that we support
> 1%
IE 10 # sorry
こんな感じで書かれていたのでpackage.jsonに追加してみた所正常に動作しました。
おわりに
結構nuxt.config.jsでwebpack拡張してる記事が多かったのですが、nuxtのかなり設定されている所をいじるよりこっちのがシンプルで良いのではと思って書きました。
色々隠蔽されている分かなり便利なのですが、拡張していこうと思った時に自力で何かする時はその分結構大変だなと思いました。