laravel-mixでvueにカスタムなPostCSS設定を使う

TL;DR

mix.jsなどではなく、mix.options.postCssに設定する

設定例( postcss-custom-mediaの例 )

mix.options({
  postCss: [
    require("postcss-custom-media")({
      "extensions": {
          '--phone': '(min-width: 544px)',
          '--tablet': '(min-width: 768px)',
          '--desktop': '(min-width: 992px)',
      }
    })
  ]
})

詳しく

laravel-mixのvueにおいて、postcss.config.jsを配置しても.vueのファイルには利用されずにうまく行かなった。

コードを深追いしてみると、mix.options.postCssを設定すれば効かせてくれるとわかった。
https://github.com/JeffreyWay/laravel-mix/blob/d0951a8f91feef2ff0d1dd4e8aba125c5aadf394/src/builder/webpack-rules.js#L252

Autoprefixerはこれと別途設定されている。
https://github.com/JeffreyWay/laravel-mix/blob/d0951a8f91feef2ff0d1dd4e8aba125c5aadf394/src/builder/webpack-rules.js#L160-L162
Autoprefixerはデフォルトでtrueになっている。
https://github.com/JeffreyWay/laravel-mix/blob/master/src/config.js#L108