PostCSSを使ってみる

PostCSSをpostcss-cliで使ってみます。

設定方法

プロジェクトルートに移動してpackage.jsonを作成します。

npm init

postcss-cliをインストールします。

npm install postcss-cli --save-dev

devディレクトリを作成して、元になるCSSファイルを作成します。

input.css

.hoge {
  color: red;
}

この状態でPostCSSを実行してみます。
（今回試しているのはWindowsなので、環境に応じてパスなどは適宜変更してください。）

node_modules\.bin\postcss dev/input.css -o public/output.css

publicディレクトリの中にoutput.cssが生成されていればOKです。

output.css

.hoge {
  color: red;
}

この時点では特に処理を行っていないので、input.cssの内容がそのまま出力されています。
　

プラグインを使う

現状だと何も処理を行っていないので、プラグインを使って処理を行うようにしてみます。
今回はCSSファイル内で変数を使えるようにする「postcss-simple-vars」を使ってみます。

まずはpostcss-simple-varsをインストールします。

npm install postcss-simple-vars --save-dev

プラグインを使えるように、プロジェクトルートに設定ファイルを追加します。

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-simple-vars')()
  ]
}

input.cssで変数を使うように修正します。

input.css

$basecolor: blue;

.hoge {
  color: $basecolor;
}

これで設定が一通り完了しましたので、PostCSSを実行してみます。
設定ファイルを追加したので、「-c postcss.config.js」が追加になっています。

node_modules\.bin\postcss -c postcss.config.js dev/input.css -o public/output.css

output.cssが変数を使った形で変更されました。

output.css

.hoge {
  color: blue;
}

npm runで実行する

今のままだとコマンドが長いので、npm runで実行できるようにしてみます。
package.jsonを開いて、scripts部分に以下を追加します。

package.json

"scripts": {
  "postcss": "postcss -c postcss.config.js dev/input.css -o public/output.css"
},

これで以下のコマンドでPostCSSが実行できるようになりました。

npm run postcss

【参考サイト】

• postcss-cli – npm
• postcss-simple-vars – npm
• PostCSSの使い方（Sassから移行）
• Sassを捨ててPostCSSに移行したのでそのときの工程メモ – Qiita