Rails 7 で導入された cssbuilding-rails についてまとめる。
cssbuilding-rails とは
CSS のバンドルができる。対応は Tailwind CSS, Bootstrap, Bulma, PostCSS, Dart Sass で、バンドルされた CSS は app/assets/builds へ出力される。
導入
Rails 7 以降では rails new 時に --css [tailwind|bootstrap|bulma|postcss|sass] を指定することで導入できる。
後から導入する場合は
$ ./bin/bundle add cssbundling-rails $ ./bin/rails css:install:[tailwind|bootstrap|bulma|postcss|sass]
開発環境などで都度ビルドしたいときは
$ yarn build:css --watch
を実行。これらを一気にやってくれるForemanも用意される。
web: bin/rails server -p 3000 css: yarn build:css --watch
Procfile.dev
以下で実行可能。
$ ./bin/dev
以降の開発では ./bin/dev で development 環境のサーバーを立てて開発することになる。
※ Foreman により出力されるため入力が受け付けられず、pry-binding などは動作しなくなるので注意。
