RailsにBootstrapを導入する手順
Gemfileに下記内容を追記します。（mini_racerはautoprefixer-railsというGemの動作に必要になります。）
|
1 2 3 |
gem 'bootstrap' gem 'mini_racer' gem 'jquery-rails' ★Rails5.1以降の場合 |
インストールする。
|
1 |
bundle |
BootStrapのCSSコードをRailsのCSSに導入する。
app/assets/stylesheets/application.cssを削除し「application.scss」を作成する。
「app/assets/stylesheets/application.css」がRailsアプリ全体のデフォルトのCSSになっています。ただ、SCSSというCSS開発の効率化の記法になっていないので一旦削除をして「application.scss」というファイルを作成しましょう。
元々記載されていた内容（*= require_tree .等）を全て削除して、application.scssに下記の記述を追記します。
|
1 |
@import "bootstrap"; |
これで今後Railsで作成するHTMLにBootStrapのCSSが当たった状態で作成することが可能になりました。
どこでapplication.cssはRailsのHTMLに適用されているのか？
app/views/layouts/application.htmlにてでapplication.cssは適用されています。これはレイアウトファイルといい、レイアウトファイルはコントローラに対応する名前のものが採用されます。なお、「application.html」はApplicationControllerに対応しており、今後作成するコントローラは全てApplicationControllerを継承して作成することになるので「app/assets/stylesheets/application.css」は自動的に全てのRailsのHTMLに対する共通CSSファイルになるのです。
JSの導入
下記のbootstrap-rubygemのページを開きます。
|
1 |
https://github.com/twbs/bootstrap-rubygem |
「Add Bootstrap dependencies and Bootstrap to your application.js:」と記載されている箇所のJSをコピーします。
「app/assets/javascripts/application.js」に下記のようにコードを貼り付けます。
|
1 2 3 4 5 6 7 |
//= require rails-ujs //= require activestorage //= require turbolinks //= require jquery3 ★コピーしたコードを追加 //= require popper ★コピーしたコードを追加 //= require bootstrap-sprockets ★コピーしたコードを追加 //= require_tree . |
Railsサーバーを再起動する。
Railsサーバーを再起動すればbootstrapが適用できています。
|
1 |
rails s |
この記事へのコメントはありません。