はじめに
Rails & Webpackerの環境でPostCSSで書かれたCSSを取り込もうとした時に、そもそもPostCSSってRailsでどう扱うんだっけ？？となって少し詰まったのでその時の対応についてになります。
環境
- rails: 6.0.0
- webpacker: 4.0.7
PostCSSって
PostCSSはNode.js製のモジュールでCSSをコンパイルできるツールです。
そうなんです。LessやSassとは異なり、CSS拡張子をソースとして新しいCSSを生成してくれるんです。
またこちらの記事に詳しくまとめられています。ありがたい！
PostCSS まとめ - Qiita
やりたいこと
Webpackerで管理しているCSSをPostCSSで書いてコンパイルする
結論
先に結論から言うと、RailsでWebpackerをインストールするとv4以上ではアプリケーションのルートディレクトリに postcss.config.js （Webpackerのv4より前は.postcssrc.yml）が生成されます。
このファイルは以下のような内容になっていてpostcss-import、postcss-flexbugs-fixes、postcss-preset-envは何もしなくてもデフォルトで使えるようになっています。
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
他のPostCSSプラグインを使いたい場合は以下の流れで追加できます。
- 使いたいPostCSSライブラリをyarn（or npm）で追加
- postcss.config.jsを修正
使用例
簡単な例で説明していきます。
WebpakcerでCSSを扱う
PostCSSの前にWebpakcerでCSSを管理する環境の準備です。
以下のような構成になっているとして
app/javascript:
├── packs:
│ # only webpack entry files here
│ └── application.js
└── css: <-- 追加
└── application.css <-- 追加
webpackのエントリーファイルからcssをimport
import '../css/application.css' <-- 追加
これで準備完了です。
bin/webpack を実行すると application.css がコンパイルされるようになります。
PostCSSプラグイン追加
試しにpostcss-nestedを追加してみます。
PostCSS plugin to unwrap nested rules like how Sass does it.
とあるようにpostcss-nestedを使うとsassのような書き方でネストしたcssを書くことができます。
では簡単なcssで確認していきます。
.hoge {
&_title {
font-size: 50px;
}
}
プラグイン追加前の状態でコンパイルして出力されたファイルを見ると&_titleがそのまま出力されてしまいます。
$ bin/webpack
# 出力されたファイルを見ると&_titleがそのままになっている
# ".hoge {\n &_title {\n font-size: 50px;\n }\n}\n"
yarn add
プラグインを追加していきます。
$ yarn add -D postcss-nested
postcss.config.jsを修正
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-nested'), <-- 追加
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
コンパイルして確認
$ bin/webpack
# コンパイルされたファイルを確認（デフォルトの設定の場合は public/packs/js 以下に出力される）
# ".hoge_title {\n font-size: 50px;\n }\n"
無事.hoge_titleの形に変換されていることが確認できました。
まとめ
以上、Webpackerでpostcss.config.jsでPostCSSを使う時の流れでした。
普段CSS周りをさわっていないと環境から作ろうとして、そもそもどうなってるんだっけとなってしまったので、たまには環境作ってざっくりでも把握しておこうと思いました。