RailsにBULMAでビューを作成するまでの手順 #Rails

どうも！！
Railsで、オリジナルアプリ開発を始めた、プログラミング学習歴3ヶ月の初心者です。

BULMAを導入するまでの経緯

CSSフレームワークのBULMAをRailsで使いたい！！！

「今のところJSを使わないので、BootstrapではなくてBULMAを使いたいな。」と思い立ち、
ビューで使用するまでの手順を模索していました。

BULMAの概要は以下を参照ください。
BULMA

具体的な手順

gemをGemfileに記載する

Gemfile

gem "bulma-rails"

bundle install

ターミナル


$ bundle install

application.scssでimport

application.scss

@import "bulma";

app/assets/stylesheets/application.scss(application.cssから変更してます。)
にBULMAをインポートする。

application.html.erbを編集する

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>ShitsumonWa</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <#以下の行を忘れずに追加する >
    <%= stylesheet_pack_tag 'application' %>

  </head>

  <body>
    <%= yield %>
  </body>
</html>

app/views/layouts/application.html.erbに
<%= stylesheet_pack_tag 'application' %>を追加

Bootstrapからの乗換の際に注意事項

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>ShitsumonWa</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

  </head>

  <body>
    <%= yield %>
  </body>
</html>

app/views/layouts/application.html.erb

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

ここの2行のままだと、
Sprockets::FileNotFound in コントーラー名#アクション名
というエラーが出て怒られるので、修正するのを忘れずに!!!!
原因が何かわからず、3時間ぐらいググり続けました...（本来ならこの時間でviewを作成できていた
）

まとめ

BULMAをRailsで利用するまでの手順は、単純です。

Rails6以降、Bootstrapが少しめんどくさくなりました。
それでも、RailsにBootstrapを導入したい人もたくさんいると思います。
以下の記事が大変参考になりました。感謝です。
Rails 6にjQueryとBootstrapを入れる

Rails6以降の変更点はこちらの記事が参考になりました。ありがたやです。
Ruby on Rails 6の主要な新機能・機能追加・変更点

個人的には、
①フロントで時間をかけるよりもしっかりバックエンドの機能実装に時間を使いたい
②実際に現役のバックエンドエンジニアの方が、現場で使用している

上記の理由でCSSフレームワークにBULMAを導入することにしました。(あと使ってて純粋に楽しい。)
アプリ開発の際に、BULMAを導入している方の参考になれば、嬉しいです。

公式: >BULMA start