はじめに
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です。
|
1 |
$ npm install --save-dev postcss-easy-import postcss-simple-vars |
|
1 2 3 4 5 6 7 8 |
"postcss": { "plugins": { // プロジェクト作成時にデフォルトで入ってるプラグイン "autoprefixer": {}, // 今回追加したいプラグイン "postcss-easy-import": {}, "postcss-simple-vars": {} } |
|
1 2 3 4 5 6 7 8 |
<style lang="postcss" scoped> $white_murky: #fafafa; .header { background-color: $white_murky; } </style> |
2. Vueファイルに外部PostCSSファイルを読み込む場合
Vueファイルにimportを使用して、外部PostCSSファイルを読み込む場合は、上記のやり方ではうまくいきませんでした。
Vueファイルに外部PostCSSファイルを読み込む場合とはどのような場合かといいますと、以下のようなケースです。
|
1 2 3 4 5 6 7 8 9 |
<style lang="postcss" scoped> // importしたいcssファイル @import './colors.css' .header { background-color: $white_murky; } </style> |
|
1 2 3 |
<style lang="postcss" scoped> $white_murky: #fafafa; </style> |
上記1のような実装方法だと、シンタックスエラーとなり、うまくいきませんでした。
公式サイトをみると、postcss.config.js使えるようなので、上記1のpackage.jsonをいじって実装するのをあきらめ、postcss.config.jsへPostCSSのプラグインを追加することにしました。
[blogcard url=”https://vue-loader-v14.vuejs.org/ja/features/postcss.html”]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const postcssEasyImport = require('postcss-easy-import') const postcssSimpleVars = require('postcss-simple-vars') // 使用プラグイン const initPlugin = [ postcssEasyImport({}), postcssSimpleVars({}) ] // 実行 module.exports = { plugins: initPlugin } |
こうすることで、無事外部ファイルのcss(colors.css)を読み込むことができました♪
上記1のpackage.jsonをいじるやり方でも問題なく外部PostCSSファイルを読み込むようにできるのかもしれないのですが、PostCSSファイルのプラグインのオプションとかを使用する場合は実装が特殊になりそうなので、ボクはpostcss.config.jsをいじるやり方のほうが好きです。
ちなみにPostCSSファイルのプラグインのオプション利用する場合は、postcss.config.jsの以下の部分へオブジェクト型でコーディングします。
|
1 2 |
postcssEasyImport({/* ここにオプションコーディング */}), postcssSimpleVars({/* ここにオプションコーディング */}) |
とはいえ、package.jsonをいじるやり方でも問題なく外部PostCSSファイルを読み込めるようにする方法やPostCSSファイルのプラグインオプションをpackage.jsonへ書く方法について、個人的には気になっててモヤモヤしてるので、もしご存知の方いらっしゃいましたら教えてください><
