주의점

본 게시물에서는 Webpacker가 설치되어 있지 않은 Rails5 이전의 앱을 대상으로 Bootstrap4를 도입하는 순서를 게재하고 있습니다.

Webpacker가 표준이 된 Rails6 앱에 Bootstrap4를 도입할 때는 다음 기사가 매우 도움이 되었습니다 🙇‍♂️
Rails에서 Bootstrap과 Font-Awesome은 Webpacker에서 지금처럼 사용합시다 - Qiita

소개

Bootstrap 4의 Components 안에 방금 사용하고 싶었던 부품이 있었기 때문에 Bootstrap 4를 Rails에 도입하는 순서를 확인했습니다.

공식 사이트

Bootstrap · The most popular HTML, CSS, and JS library in the world.

주의점

게시 시점의 Bootstrap 버전은 v4.0.0-beta.2 4.1.1입니다.

젬

지금까지 rails에 Bootstrap을 도입할 때는 bootstrap-sass를 이용했지만, README에 "Bootstrap 4에서는 bootstrap-rubygem를 이용해라"고 안내가 있었습니다.


Bootstrap
젬
GitHub


2~3
bootstrap-sass
twbs/bootstrap-sass

4
bootstrap
twbs/bootstrap-rubygem

도입 절차

bootstrap-rubygem의 README 거리로 진행합니다.

Gemfile

Gemfile에서 bootstrap를 지정하여 설치합니다.
Bootstrap은 jQuery에 의존하기 때문에 (기본적으로 jQuery가 설치되지 않음) Rails5.1 이상에서는 jquery-rails도 Gemfile에 추가합니다.

Gemfile

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

$ bundle install

주의점sprockets-rails가 v2.3.2. 이상이어야 합니다.

`sprockets-rails` 버전 확인 방법

$ bundle show |fgrep sprockets-rails
  * sprockets-rails (3.2.1)

application.scss

Rails 앱을 만들 때 생성되는 application.css를 application.scss로 이름을 바꾸는 등 .scss (Sass 구문의 경우 .sass) 파일을 준비합니다.

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

app/assets/stylesheets/application.scss에서 bootstrap을 가져옵니다.

/assets/stylesheets/application.scss

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

주의점
- Sass 파일에서 *= require 및 *= require_tree 제거
- Sass 파일에서 가져 오기 @import 사용
- Sass 파일에서 *= require를 사용하면 다른 스타일 시트에서 Bootstrap mixin 및 변수를 사용할 수 없습니다.

application.js

Bootstrap 및 종속성을 application.js에 추가

app/assets/javascripts/application.js

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

보충
- Bootstrap의 tooltips와 popover는 popper.js에 의존합니다.
- bootstrap 종속 gem에 popper_js가 지정되었으므로 새로 설치할 필요가 없습니다.
- 컴파일 속도를 높이려면 bootstrap-sprockets 대신 bootstrap를 지정하십시오.

사이고에게

Bootsrap3 사이트에서 이용하고 있던 코드를 이번에 구축한 Bootstrap4 환경에 적용해 보았습니다. 외형에 큰 변화는 없지만, 4쪽이 색조가 선명하네요.