CSS
JavaScript
Sass
vue.js
nuxt.js

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

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

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

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

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

nuxt.config.js
build: {
  postcss: [
    require('autoprefixer')({
      browsers: ['IE 11', 'last 2 versions' ]
    })
  ]
}

かんたん🍟

Grid を IE11 に対応させる

先にあげたコードは、IE 11 用にプレフィクスをつけてくれるのですが、Grid 系プロパティには不十分です。
これに対応するには、次のように追記します。

nuxt.config.js
build: {
  postcss: [
    require('autoprefixer')({
      browsers: ['IE 11', 'last 2 versions' ],
      grid: true
    })
  ]
}

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

20180515 追記

とか嘆きましたが、なんと autoprefixer v8.5 から、 gap に対応してくれるようになりました*

grid-gap を IE11 に対応させる

postcss-gap-properties を使うことで、 gap のポリフィルを出力してくれるようになります。

合わせて、Nuxtの場合は古い autoprefixer がインクルードされているので、最新版を改めてインストールします。


yarn add --dev autoprefixer postcss-gap-properties

パッケージを追加したら、以下のように追記します。

nuxt.config.js
build: {
  postcss: [
    require('postcss-gap-properties')(),
    require('autoprefixer')({
      browsers: ['IE 11', 'last 2 versions' ],
      grid: true
    })
  ]
}

これで、gap のIE用のポリフィルも自動で実装できるようになりました!!いい時代!!!

参考

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

関連

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

おわりに

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

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

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

おわります。