Angular CLIでPostCSSを使えるようにする
Angular CLIではPostCSSをサポートしてないので力技でどうにかしたという話です。(Angular CLI 7.2.2で動作確認してます)
方法
postinstall でAngular CLIの内部にあるwebpackのconfigを書き換えるという力技でどうにかします。
以下のスクリプトを postinstall で実行すれば任意のPostCSSのプラグインを差し込んでビルドできます。
解説
方法としてはng-cli-pug-loader を参考にしました。
Angular CLIはPostCSSのなかでも autoprefixer には対応してるので内部でPostCSSのloaderは使用されてます。なので、そのPostCSSのloader設定に追記してしまうというのが今回の方法です。
具体的にはここです。
このあたりに使いたいPostCSSのPluginを差し込めば、Angular CLIでビルドできるようになるわけです。
最後に
他には @angular-builders/custom-webpack を使ってwebpack設定ファイルを上書きするという方法もあったのですが、せっかくビルドをすべてAngularCLIに任すことができるのに、ここで外部ライブラリ使ってwebpack設定を書いてしまったらAngular側で破壊的な変更があったときにライブラリ側がサポートしてくれないとどうにもならなくなるので、それはできるだけ避けたいなーと思ってました。かといって ng eject でwepack 設定すべて吐き出すのも同じ理由で嫌だったので、今回はこのような方法で対応してみました。
これであれば、Angular側で破壊的な変更があってもスクリプト修正すればなんとかなります。
もしAngularでPostCSSを使いたい方は参考にしてみてください。
