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

March 23, 2019

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 のテーマが適用されます。 01

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