LaravelMixでAutoprefixでgridを有効化したい時の設定

はる

僕は、フロントエンドの開発環境でLaravelMixを普段使用しています。
そのLaravelMixでCSSのGridレイアウトを使用するときに、AutoprefixでIE11対応するときの設定をメモ！

STEP1: webpack.mix.js にオプションを追記

mix.sass(`resource/scss/style.scss`, `dist/assets/css/`)
.options({
    postCss: [
      require('autoprefixer')({
        grid: 'autoplace',
      }),
    ],
  }
)

oputionを追記して、postCssの設定を上記のように指定します！

Does Autoprefixer polyfill Grid Layout for IE?

Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 and IE 11 syntax, but this polyfill will not work in 100% of cases. This is why it is disabled by default.

First, you need to enable Grid prefixes by using either the grid: "autoplace" option or the /* autoprefixer grid: autoplace */ control comment. Also you can use environment variable to enable Grid: AUTOPREFIXER_GRID=autoplace npm build.

https://github.com/postcss/autoprefixer

      require('autoprefixer')({
        grid: true,
      }),

STEP2: .browserslistrc ファイルを編集

ie >= 11

.brewserlistrc があることを確認し、上記のようにie11以上のブラウザを対象とするように指定しておきます！