《Nuxt.js》CSSのオートプレフィクスをカスタマイズする方法。GridのIE対応も！

Nuxt.js で CSS(Sass) をコンパイルすると、ありがたいことに autoprefixer がベンダープレフィクスを自動で適用してくれます。

面倒で不毛な作業を Nuxt は設定不要でレガシーブラウザに対応してくれるわけですが、さらにこれをブラウザの要件に合わせて実装する tips です。

autoprefixer の設定をカスタマイズする

要件や好みに合うようにカスタマイズしたい場合は、次のように nuxt.config.js を記述します。

nuxt.config.js

module.exports = {
  build: {
    postcss: {
      preset: {
        autoprefixer: {
          grid: true,
        },
      },
    },
  }
}

かんたん🍟

ただし、Grid でマージンをコントロールするプロパティの gap に関しては、ポリフィルを適用することができません。
なので、悲しいけれど、これは捨てるという感じですね、IEでは。。

20180515 追記

とか嘆きましたが、なんと autoprefixer v8.5 から、 gap に対応してくれるようになりました＊
これで、gap のIE用のポリフィルも自動で実装できるようになりました！！いい時代！！！

参考

autoprefixer の Grid 対応に関しては @tonkotsuboy_com さんが、詳細を丁寧に解説してくださっています。

• AutoprefixerがパワーアップしてCSS GridのIE 11対応がバリ楽になってた - Qiita

関連

Grid の素敵さに関しては、以前記事を書きました。

• 《CSS》デザイナーでも簡単便利、Gridの神な実践機能を少しだけ伝えたい。 - Qiita

おわりに

Nuxt.js は SSR / SPA を実装するだけでなく、静的なサイトを構築するのに便利なフレームワークで、コンポーネントを実装するとアトミックデザインの流れに乗ることができます。
とても気に入っているのですが、いろいろな知見が要求される場面がおおいので、本格導入するまでの学習コストは少し高い印象もあります。

基本的なことは公式ドキュメントに綺麗にまとまっていますが、そこにないような小粒な tips をまとめていこうと思います。

Nuxt.js で Sass の導入についてはこちらに書きました。

• 《Nuxt.js》Sassの共通の変数やmixinを一括で各コンポーネントに読み込む方法。 - Qiita

おわります。