LESS から CSS に変換する際に画像を base64 に変換して埋め込める機能が
あると知って早速使ってみたら大きくハマったのでメモ.

data-uri とは？

data-uri は, LESS に標準で用意されている関数で, 下記のように書くことで CSS への返還時に base64 の値に変換してくれます.

セレクタ {
  background: data-uri('画像のパス');
}

これが CSS になると

セレクタ {
  background: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
}

となります.

サイズ制限が...

上のように書くと大抵うまくいくのですが, 私の場合はそうはいきませんでした.

背景画像を base64 に変換して埋め込もうとしたのですが, 大きな画像だったのでサイズ制限に引っかかった為です.

IE8 だと base64 画像にサイズ制限があるらしく, それを考慮しての対応とのことです.
これは less のオプションに ieCompat:false を追加することで回避できます.

IE8 なんて今時サポートするプロジェクトなんて少ないだろうし,
デフォルト false にしてくれたら良かったのにー;;

Reference

• http://lesscss.org/functions/
• https://github.com/gruntjs/grunt-contrib-less