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を入れる。
それとプラグイン。とりあえずautoprefixerとpostcss-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が読み込まれてベンダープレフィックスもちゃんとついてるはず。