ハッキングバカ

プログラミングに関するメモ

Rails 5 で Bootswatch 4 を使う

環境: macOS 10.13.4 Rails 5.2.0 Ruby 2.5.1

bootswatch 3 は gem から入れられたけれど、4 を使おうとする時は違ったやり方をする必要がある。
まずはインストール。

yarn add bootswatch@4.1.1

css を scss に変更。

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

使用する css をインポート。

// app/assets/stylesheets/application.scss
@import "bootswatch/dist/yeti/variables";
@import "bootstrap/scss/bootstrap";
@import "bootswatch/dist/yeti/bootswatch";

yeti の所はお好みのテーマで。Bootswatch: Free themes for Bootstrap

使用する js 周り。
今回は外部 cdn を使用する。

# app/views/layouts/application.html.erb
# ...
<%= stylesheet_link_tag    'application', media: 'all',
	'data-turbolinks-track': 'reload' %>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<%= javascript_include_tag 'application',
	'data-turbolinks-track': 'reload' %>
# ...


参考: Rails 5 に yarn で Bootswatch 4 beta 入れた - Ruby and Rails
Rails5.1.0 + Devise4.3.0 + Bootstrap3 with Yarn - Qiita