カテゴリー: Laravel

こちらの記事でAutoprefixerを使用してCSS GridをIE11に対応させる方法が紹介されています。

上記の記事ではgulpやwebpackでの実装方法が書かれているのですが、LaravelMixでどうやるかは書かれていなかったので調べてみました。

前提条件

Laravel本体のインストールとnpm installが済んでいる状態。Laravelのバージョンは5.7.7で試しました。
Autoprefixerはデフォルトで使用可能になっています。

実装

webpack.mix.jsに、以下のコードを追記する。

mix.options({
    postCss: [
        require('autoprefixer')({
            grid: true // ←tureでIE11対応のベンダープレフィックスが出力される
        })
    ]
});

/*これが*/
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 50px 1fr 50px;
}

/*こうなる*/
.container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 1fr;
      grid-template-columns: 200px 1fr;
  -ms-grid-rows: 50px 1fr 50px;
      grid-template-rows: 50px 1fr 50px;
}

参考：Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年〜2018年）
Laravel Mix & Autoprefixer

追記

//こんな書き方でコンパイルできる。
mix.js('resources/js/app.js', 'public/js');
mix.sass('resources/sass/app.scss', 'public/css');
mix.options({
    postCss: [
        require('autoprefixer')({
            browsers: ['last 2 versions'],
            grid: true
        })
    ]
});

//これもOK。
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [
            require('autoprefixer')({
                browsers: ['last 2 versions'],
                grid: true
            })
        ]
    });