Ruby on RailsにBulmaを導入する方法

✏️️ 2019/08/16 👍️2019/08/16 🔗

概要

Ruby on RailsのアプリケーションにCSSのフレームワークであるBulmaを導入します。
javaScriptはAsset pipelineではなく、webpackerで管理しています。

Bulmaを導入

npmパッケージをインストールします。

yarn add bulma

meta tag を追加します。viewportを設定することで、ブラウザがmedia queryの条件判定を正しく理解するようになります。

参考: もう逃げない。HTMLのviewportをちゃんと理解する

# app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
      ・
      ・
      ・
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ・
      ・
      ・
  </head>
・
・
・
</html>

cssを読み込みます

// app/javascript/packs/application.js
import 'bulma/css/bulma.min.css';

以上で, Ruby on Rails のアプリケーションにBulmaを導入する方法は完了です。

参考

Akito
日本のスタートアップで主にRuby on Railsを使ってプロダクト開発をしています。