shmn7iii

Blog

Rails 7 cssbuilding-rails

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 などは動作しなくなるので注意。

参考