laravel-mixを使ってobject-fitのIE対応(Polyfill)を自動化する【2分】

こんにちは!のせっち@nosecchi01です。

object-fitのIE対応をlaravel-mixを使って自動対応させる方法を解説します。

Gulpをでやりたい方は下記の記事をご参照ください。

object-fitのpolyfillを導入

まずはobject-fit-imagesをインストールします。

npm i object-fit-images

js側はimportするだけです。

import objectFitImages from 'object-fit-images';

objectFitImages();

通常の使い方は、object-fitを指定するクラスにfont-familyをセットで指定します。

.your-favorite-image {
	object-fit: contain;
	font-family: 'object-fit: contain;';
}

こちらは公式の通りです。

laravel-mixを使って自動対応させる

font-familyを書く作業は自動化できます。laravel-mixを使う方法をご紹介します。

まずはパッケージをインストール

npm i -D postcss-object-fit-images

npm i -Dnpm install --save-devと同じです。

postCssオプションに定義を書くだけです。
webpack.mix.jsを下記のように編集します。

const mix = require('laravel-mix');

mix.setResourceRoot('dist');

mix
  .sass('src/scss/app.scss', 'dist/css/')
  .options({
    postCss: [
      require('postcss-object-fit-images'),
    ]
  });

これでscssのコンパイル時に自動でpolyfillを追記することができます。

上記のwebpack.mix.jsは解説用に最低限の設定のみ書いていますが、Web制作に必須の設定は下記の記事で解説しています。

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。