javascript

Vue-CLI4系でPostCSSプラグインを導入する方法

はじめに

Vue-CLI4系はpostcssがデフォルトで入っており、package.jsonのPostCSSのプラグインへ今回使用するライブラリ(postcss-simple-vars,postcss-easy-import)を追加するだけで使えるようになると思っていたのですが、うまくいかずハマってしまいました。。。

Vue-CLI4系でPostCSSプラグインを導入する方法を開発メモとしてまとめましたので、同じようにつまってしまった方はご参考にしていただけると嬉しいです。

1. Vueファイルに直接PostCSSを書く場合

Vueファイルに直接PostCSSを書く場合は、拡張したいプラグインのライブラリ(今回はpostcss-simple-vars、postcss-easy-import)をインストールし、package.jsonのPostCSSのプラグインへ対象ライブラリを追加するだけでOKです。

2. Vueファイルに外部PostCSSファイルを読み込む場合

Vueファイルにimportを使用して、外部PostCSSファイルを読み込む場合は、上記のやり方ではうまくいきませんでした。

Vueファイルに外部PostCSSファイルを読み込む場合とはどのような場合かといいますと、以下のようなケースです。

上記1のような実装方法だと、シンタックスエラーとなり、うまくいきませんでした。

公式サイトをみると、postcss.config.js使えるようなので、上記1のpackage.jsonをいじって実装するのをあきらめ、postcss.config.jsへPostCSSのプラグインを追加することにしました。

こうすることで、無事外部ファイルのcss(colors.css)を読み込むことができました♪

上記1のpackage.jsonをいじるやり方でも問題なく外部PostCSSファイルを読み込むようにできるのかもしれないのですが、PostCSSファイルのプラグインのオプションとかを使用する場合は実装が特殊になりそうなので、ボクはpostcss.config.jsをいじるやり方のほうが好きです。

ちなみにPostCSSファイルのプラグインのオプション利用する場合は、postcss.config.jsの以下の部分へオブジェクト型でコーディングします。

とはいえ、package.jsonをいじるやり方でも問題なく外部PostCSSファイルを読み込めるようにする方法やPostCSSファイルのプラグインオプションをpackage.jsonへ書く方法について、個人的には気になっててモヤモヤしてるので、もしご存知の方いらっしゃいましたら教えてください><