목적

Rails5(5.2)에
Bootstrap4 (2019/5/13 현재 latest ver.4.3.1)
Bootswatch (2019/5/13 현재 Bootstrap ver.4.3.1에 대응)
를 적용하고 view의 외형을 좋은 느낌으로 만든다.

환경

macOS Mojave(10.14.4)
Rails5.2.3
Ruby2.5.1(rbenv)
Rails는 new까지 끝나고, rails s로 확인할 수 있는 상태

Bootstrap

Rails 앱에서 Bootstrap 4 사용 참고

Gemfile에 다음을 추가

Gemfile

#bootstrap
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'

application.js에 다음을 추가

app/assets/javascripts/application.js

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

application.scss

app/assets/stylesheets/application.css를 application.scss로 이름 바꾸기
원래 CSS에

*= require_tree .
*= require_self

뭔가를 모두 삭제하고,

application.scss

@import "bootstrap";
@import "*"; // これが無いとstylesheets内に個別のscssを読み込めない

추가

홈 컨트롤러를 만듭니다. index view 만들기

bootstrap의 확인을 위해 view/home/index.html.erb 생성

$ rails g controller home index

config/routes.rb를 편집하고 라우팅 설정

#get 'home/index'를 주석 처리하고 root 'home#index'를 설정합니다.

config/routes.rb

#get 'home/index'
root 'home#index'

에 다시 씁니다.

다음을 index.html.erb에 붙여넣기

index.html.erb

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor01">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

여기까지 일단 체재 확인

rails s

Puma를 기동해, 이하와 같이 되어 있으면 Bootstrap4가 적용되고 있다.

Bootswatch 적용

Gemfile에 다음을 추가
※ 반드시 「github: "thomaspark/bootswatch"」를 추가하는 것!

Gemfile

#bootswatch
gem "bootswatch", github: "thomaspark/bootswatch"

위 추가 bundle

bundle

그런 다음 config/initializers 아래에 bootswatch.rb 파일을 추가하고,
bootswatch를로드합니다.

bootswatch.rb

Rails.application.config.assets.paths += Gem.loaded_specs["bootswatch"].load_paths

테마 지정

app/assets/stylesheets/application.scss에 Bootswatch 테마 이름을 추가합니다.
여기서는 "yeti"를 설정한다.
다른 체재는 Bootswatch을 참조할 것.
여기서 조심하는 것은
1.bootstrap import 전에 '테마 이름/variables'
2. 'bootstrap'을 import한 후 '테마 이름/bootswatch'
다음과 같이 된다.

application.scss

// ここからbootswatchのテーマ
@import "yeti/variables";
@import "bootstrap";
@import "yeti/bootswatch";
@import "*"; // これが無いとstylesheets内に個別のscssを読み込めない

yeti가 적용되었습니다!


darkly를 적용시켜 보자.

application.scss

// ここからbootswatchのテーマ
@import "darkly/variables";
@import "bootstrap";
@import "darkly/bootswatch";
@import "*"; // これが無いとstylesheets内に個別のscssを読み込めない

응~~~ 떫다.

minty

걸!