webpackを使ってobjectFitをIEに対応させる

webpackでobjectFitImagesを使えるようにするのははじめてだったので手順を残す。

最低限必要なのはライブラリだけ。
https://github.com/fregante/object-fit-images

object-fit-imagesをインストールする

yarn add object-fit-images

読み込ませるためのjsを書く

objectFitImages.js

/*
 * This file is use object-fit-images
 * IEをobjectFitに対応させるためのライブラリ
 * https://www.npmjs.com/package/object-fit-images
 *
*/
import objectFitImages from 'object-fit-images'

objectFitImages()

後はapp.tsなりにimportすればおｋ。

IEにも対応する

全てのCSSにfont-familiyを書いていくのは手間なので、postCssを使う。
https://github.com/ronik-design/postcss-object-fit-images

yarn add -D postcss-object-fit-images

postcss.configに追記

const objectFitImages = require('postcss-object-fit-images')
const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer,
    objectFitImages,
  ],
}

終わり。