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

Posts Published: 2019年3月23日

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

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

動作を確認した環境

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

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

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

app/assets/stylesheets下のapplication.cssをリネームし、 application.scssとします。
```
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
```
先ほどのapplication.scssに以下を追記して、テーマを適用します。
```
@import "bootswatch/[theme]/variables";
@import "bootstrap";
@import "bootswatch/[theme]/bootswatch";
```
- [theme]は利用したいテーマ名。
app/assets/javascripts/下のapplication.jsに以下を追記して、 JavaScriptが動くようにします。
```
//= require jquery
//= require bootstrap-sprockets
```

以上。

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

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