Rails 5.x で Bootswatch 4.x gem を利用する

Rails アプリケーションを作るにあたり、手っ取り早く見た目をよい感じにするため、Bootstrap を適用しました。 そのままでは Bootstrap 感があるので、Bootstrap に適用できるテーマ Bootswatch を利用します。

この記事では、Rails 5.x 系に対して、Bootswatch 4.x gem を適用する方法を記載しています。

動作を確認した環境

• Rails 5.2.2.1
• Bootstrap gem 4.3.1
• Bootswatch gem 4.3.1

手順

bootswatch-rails は、 Bootswatch 3.x 系なので、bootswatch を利用します。

1. Gemfile に以下を記述して、bundle します。

   gem 'bootstrap'
   gem 'bootswatch'
   gem 'jquery-rails'
   

2. app/assets/stylesheets 下の application.css をリネームし、 application.scss とします。

   mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
   

3. 先ほどの application.scss に以下を追記して、テーマを適用します。

   @import "bootswatch/[theme]/variables";
   @import "bootstrap";
   @import "bootswatch/[theme]/bootswatch";
   

   • [theme] は利用したいテーマ名。

4. app/assets/javascripts/ 下の application.js に以下を追記して、 JavaScript が動くようにします。

   //= require jquery
   //= require bootstrap-sprockets
   

以上。

あとは、HTML を Bootstrap に合わせれば、Bootswatch のテーマが適用されます。

上図では、Minty というテーマを適用しています。