Rails App에 Bootstrap 사용하기

versions

Rails 5.1이상
Bootstrap 4 이상

Gemfile

Gemfile에 bootstrap과 의존관계인 jQuery를 설치

gem 'bootstrap'
gem 'jquery-rails'

$ bundle install

application.scss

Rails App 작성 시에 생성되는 application.css를 application.scss로 rename해준다.

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

생성된 application.scss에 기존 코드를 삭제 후 bootstrap을 import하기

@import "bootstrap";

scss파일에서 import는 @import를 이용
.css 파일에서 사용하던 *= require,*= require_tree 로는 다른 스타일시트 파일에서 bootstrap의 믹스인이나 변수를 이용할 수 없게되므로 삭제해 준다.

application.js

bootstrap과 의존관계를 application.js에 추가

//= require jquery3
//= require popper
//= require bootstrap-sprockets