Symfony4でBabelとPostCSSを使えるようにする

前に書いた記事の続き。

BabelとPostCSSを使えるようにする。

Configuring Babel (Symfony Docs)

PostCSS and autoprefixing (postcss-loader) (Symfony Docs)

と思ったんだけど、Encore入れるとすでにBabelが有効になってて、ES2015以降のシンタックスで記述できてちゃんとビルドもされる。
実際、yarn.lock を見ると、babel-core babel-loader babel-preset-env をインストールしていることがわかる。
Babelに関連するデフォルトの設定を変更したいときは、ドキュメントのようにすればいいのだけど、とりあえず今はこのままで。

なので、イチから準備するのはPostCSSだけ。

PostCSSを使うためにpostcss-loaderを入れる。
それとプラグイン。とりあえずautoprefixerpostcss-normalizeを入れる。

$ yarn add --dev postcss-loader autoprefixer postcss-normalize

インストールしたら postcss.config.js の作成。
デフォルトではプロジェクトのルートに作成するようになっているんだけど、ここでは config/ に作成して webpack.config.js に設定を記述するときにパスを指定する。

module.exports = {
  plugins: [
    require('autoprefixer')(),
    require('postcss-normalize')(),
  ]
}

webpack.config.js に設定を追記。

Encore
    // ...
    .enablePostCssLoader((options) => {
        options.config = {
            path: 'config/postcss.config.js'
        }
    })

これで設定は完了。

あとは assets/css/app.css を書いてビルド。
試しにこんな感じのCSSを書いてみる。

@import-normalize;

div {
  border-radius: 4px;
}

p {
  display: flex;
}

ビルド。

$ yarn run encore dev

ビルドに成功したらNormalize.cssが読み込まれてベンダープレフィックスもちゃんとついてるはず。