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

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

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

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

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

こんにちは！のせっちです。 object-fitのIE対応をGulpを使って自動対応させる方法を解説します。 …

flex-box.net

object-fitのpolyfillを導入

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

npm i object-fit-images

object-fit-images

Polyfill object-fit and object-position on images on IE9, IE10, IE11, Edge, Safari, …

www.npmjs.com

js側はimportするだけです。

import objectFitImages from 'object-fit-images';

objectFitImages();

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

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

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

fregante/object-fit-images

🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, … – fregante/object-fit-images

github.com

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

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

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

npm i -D postcss-object-fit-images

npm i -Dはnpm 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制作に必須の設定は下記の記事で解説しています。

【簡単】laravel-mixを使って爆速マークアップ環境を構築する方法【laravel外で使う】

こんにちは！のせっちです。 今回は、laravel-mixを使った、マークアップ環境の構築を解説します。当ブロ…

flex-box.net