Rails6 + Webpackerな環境でyarnで入れたbulmaを使う

bulmaは美しいCSSフレームワークです。Railsで使おうとする場合、bulma-railsというgemを使ってもいいのですが、せっかくyarnが入っているので、yarnでインストールすることにしました。

bulma-railsは、本家よりすこし遅れてアップデートが反映されていくので、早く最新版を使いたい場合は、yarnで入れる方にメリットがあります。

環境

• Ruby 2.7.1
• Rails 6.0.3
• Webpacker 4.3.0

特にオプションは指定せずrails newした直後の状態から始めます。

手順

bulmaをインストール

yarnでbulmaをインストールします。

yarn add bulma

stylesheet.scssを設置

Railsからbulmaを読み込めるようにします。

まず、読み込むCSSを確認します。通常、node_modules/bulma/css/bulma.min.cssが配置されているので、これを読み込みます。

$ ls node_modules/bulma/css
bulma-rtl.css      bulma.css
bulma-rtl.css.map  bulma.css.map
bulma-rtl.min.css  bulma.min.css

app/javascript/packs/application.scssに下記を記述します。無い場合は作成します。| ~(チルダ)に続けてnode_modulesから見たパスを指定します。

@import '~bulma/css/bulma.min';

viewからapplication.cssを読み込む

application.html.erbに、こちらの記述があることを確認してください。なければheadタグ内に追加します。

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %

以上でRailsからbulmaを使う準備ができました。簡単ですね。

使ってみる

<div class="section">
  <article class="message">
    <div class="message-header">
      <p>こんにちは</p>
      <button class="delete" aria-label="delete"></button>
    </div>
    <div class="message-body">
    bulmaをインストールして使ってみました。
    </div>
  </article>
</div>

以上です！