Bootstrap 5 및 Font Awesome 6을 Rails 7에 추가

Rails Command Line을 사용하여 앱을 생성하는 동안 Bootstrap을 추가하는 쉬운 방법이 있지만 여기서는 수동으로 추가하는 방법을 보여주었습니다. Rails 7 앱에 Bootstrap 5 및 Font Awesome 6을 추가하는 것 외에도 JQuery, 사용자 지정 scss(custom.scss) 및 사용자 지정 javascript(my_script.js)를 Rails 7 앱에 추가할 예정입니다.

버전

루비 3.1.2

레일 7.0.3.1

부트스트랩 5.2.0

폰트 어썸 6.1.2

지침

Gemfile에 다음을 추가합니다.

gem "sassc-rails"
gem "bootstrap", "~> 5.2.0"
gem "jquery-rails"

진행하기 전에 터미널에서 bundle install를 기억하십시오.

터미널에서 (1) Font Awesome을 추가하고, (2) application.css를 application.scss로 이름을 바꾸고, (3) custom.scss를 만들고, (4) my_script.js를 만듭니다.

$ bin/importmap pin @fortawesome/fontawesome-free
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
$ touch app/assets/stylesheets/custom.scss
$ touch app/javascript/my_script.js

application.scss에서 모든 *= require 및 *= require_tree 문을 제거하십시오.

app/assets/stylesheets/application.scss에서 부트스트랩 및 custom.scss 가져오기:

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

config/environments/development.rb에서 인라인 소스 맵 활성화:

config.sass.inline_source_maps = true

제대로 활성화하려면 자산 캐시를 지우고 레일 서버를 다시 시작하십시오.

$ rm -r tmp/cache/assets

In config/importmap.rb:

# From "jquery-rails" gem
pin "jquery", to: "jquery3.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true

# From "bootstrap" gem
pin "bootstrap", to: "bootstrap.min.js", preload: true
pin "@popperjs/core", to: "popper.js", preload: true

# Use all.js instead of fontawesome.js
pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/[email protected]/js/all.js"

# Custom JS
pin "my_script", to: "my_script.js", preload: true

config/initializers/assets.rb에서 (gem과 함께 제공된 js 파일 추가):

Rails.application.config.assets.precompile += %w( jquery3.min.js jquery_ujs.js bootstrap.min.js popper.js )

In application.js:

import "jquery";
import "jquery_ujs";
import "@popperjs/core";
import "bootstrap";
import "@fortawesome/fontawesome-free";
import "my_script";

In custom.scss :

body {
  background-color: #888;
}

my_script.js에서:

// Test if jquery is loaded by typing $.fn.jquery in the console as per
// https://stackoverflow.com/questions/6973941/how-to-check-what-version-of-jquery-is-loaded/26674265#26674265

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

중요 사항

config.assets.precompile의 assets.rb에 추가해야 하는 유일한 경우는 gem에서 JavaScript를 추가하려는 경우입니다. 즉, ./bin/importmap pin 명령을 사용하여 JavaScript 파일을 추가할 때 assets.rb에 아무것도 추가할 필요가 없습니다.

사용자 정의 JavaScript 파일이 있을 때마다 importmap.rb에 포함해야 합니다. 예를 들어 line: pin "my_script", to: "my_script.js", preload: true을 importmap.rb에 추가하고 lineimport "my_script.js"을 application.js에 추가합니다. importmap.rb가 아닌 application.js 파일에 사용자 정의 JavaScript 파일을 추가하면 앱이 개발 모드에서 작동할 수 있지만 프로덕션 모드에서는 JavaScript 파일이 로드되지 않습니다.

부트스트랩과 JS가 예상대로 작동하는지 확인하기 위한 테스트

인덱스 작업으로 홈 컨트롤러 생성

$ rails g controller home index

app/views/home/index.html.erb에 Bootstrap 모달 구성 요소를 추가합니다.

<div class="container">
  <div class="row">
    <div class="col-md-4 mt-4">

      <i class="fa-solid fa-house fa-2xl mx-3"></i>
      <i class="fa-solid fa-plane fa-2xl mx-3"></i>
      <i class="fa-solid fa-martini-glass fa-2xl mx-3"></i>

    </div>
    <div class="col-md-8 mt-4">
      <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
    </div>
  </div>

  <div class="row mt-4">
    <div class="col-md-8">
      <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
        Popover on top
      </button>
      <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
        Popover on right
      </button>
      <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
        Popover on bottom
      </button>
      <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
        Popover on left
      </button>
    </div>
  </div>
</div>

http://localhost:3000로 이동합니다. 아무 버튼이나 클릭하면 팝오버가 표시됩니다(Bootstrap 및 my_script.js 작동). 배경은 회색이어야 합니다(custom.scss에서 설정). 홈, 비행기 및 마티니의 3가지 아이콘이 표시되어야 합니다. 웹 브라우저 콘솔을 열고 다음을 입력합니다.

$.fn.jquery

이 문서 작성 시점의 jQuery 버전 3.6.0을 반환해야 합니다.

예제 앱 링크: https://github.com/overdrivemachines/bootstrap-rails7