배경

Rails5.1 계에서 Bootstrap을 도입할 때 매번 도입 순서를 잊어 버리기 때문에, 그 메모로서 투고하겠습니다.

전제

Bootstrap을 배포하려면 jQuery가 실행되는 환경이 필요합니다

Rails 5.1 이상에서는 기본적으로 jQuery를 사용할 수 없습니다

배포 1단계: jQuery 배포

* rails _5.1.4_ new アプリ名 명령 실행 직후에 응용 프로그램의 병아리가 생성 된 상황을 가정

이번에는 자바 스크립트 버키지 관리자 Yarn를 사용합니다!
(Yarn는 Rails의 Bundler처럼 여러 패키지를 관리하는 도구입니다)

Yarn 자체를 도입하는 방법 (공식 HP)
htps : // 또는 rn pkg. 코 m/ぁg/엔/

이번에는 MacOS 버전에서 소개하므로 다음 명령을 실행하여 Yarn을 도입합니다.

brew install yarn

그리고 rails new 한 디렉토리 내에서 실행

yarn add jquery

명령이 실행되면 node_mojules라는 폴더가 생성되고 jQuery가 저장됩니다.

배포 2단계: jQuery 로드

node_mojules라는 폴더에 생성된 jquery를 マニフェストファイル로 로드합니다.

* 주석マニフェストファイル 는 Rails로 정리해 읽고 싶은 라이브러리 등의 정보를 미리 기술해 두는 설정 파일입니다!

Bootstrap 도입에 있어서 기술이 필요한 매니페스트 파일은 이하와 같다!

javascript : jQuery 설정에 필요

app/assets/javascript/application.js

css : Bootstrap 자체의 설정에 필요

app/assets/stylesheets/application.css

먼저 jQuery를로드하는 설정에서

application.js

<中略>
# //= require_tree . より上に　今回読み込みたいjQueryの設定を記述

//= require rails-ujs
//= require turbolinks
//= require jquery/dist/jquery.js　　←　ここが今回記述追加した部分
//= require_tree .

위의 설정을 수행하면 jQuery를 사용할 수 있습니다.

배포 3단계: Bootstrap 배포

gem을 설치하는 대신 이전처럼 Yarn를 사용하여 설치하십시오!
Bootstrap3을 설치하기 때문에 @ 이후에 3으로 명시하여 명령 실행
yarn add bootstrap@3
다음 매니페스트 파일에 Bootstrap을로드하는 설명 추가

application.css

<中略>
 *
 *= require bootstrap/dist/css/bootstrap.min
 *= require_tree .
 *= require_self
 */

확인

실제로 rails s 템플릿에 Bootstrap이 반영되는지 확인합니다.

index.html.erb

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#gnavi">
        <span class="sr-only">Bootstrap</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Bootstrap

      </a>
    </div>
    <div id="gnavi" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="">top</a></li>
        <li><a href="">menu1</a></li>
        <li><a href="">menu2</a></li>
      </ul>
    </div>
  </div>
</nav>

위의 코드에서 Bootstrap의 navbar가 템플릿에도 반영되어 있는지 확인할 수 있습니다.

요약

Rails5.1 계에서는 이전 버전과 같이 jQuery와 Bootstrap을 Yarn 등 패키지 관리 툴로 인스톨 할 필요가 있다!
그러나 gemfile에 기존과 같이 twitter-bootstrap-rails 같은 gem을 추가하고 bundle install하지 않아도됩니다! !

노트

완전히 자신의 메모 용 기사이므로 실수 등도있을 수 있습니다 ...
그 때는 지적해 주시면 다행입니다.