Rails 6, Bootstrap 5: 튜토리얼

콘텐츠가 원래 게시되었습니다here.

부트스트랩 5는 가능한 한 빨리 일관된 디자인을 제공해야 할 때 사용자 정의가 가능하고 유쾌합니다. 마지막 Rails 6 버전에서 사용하는 방법을 살펴보겠습니다.

전제 조건

다음은 이 튜토리얼에서 사용한 도구입니다. 이전 버전이 작동할 수 있지만 시도하지 않았습니다.

$> ruby --version  
=> 3.0.0  
$> rails --version  
=> 6.1.3  
$> node --version  
=> 14.15.1  
$> yarn --version  
=> 1.22.10  

1. 새 Rails 앱 만들기

$> rails new myapp && cd myapp  

이제 잠시만요... 알았어! 이제 새로운 새 기본 Rails 앱이 생겼습니다.

2. 환영 페이지 구축

app/controllers/welcome_controller.rb에서 다음과 같이 컨트롤러를 생성합니다.

# inside app/controllers/welcome_controller.rb  
class WelcomeController < ApplicationController  
end  

다음과 같이 config/routes.rb에서 기본 경로를 구성합니다.

# inside config/routes.rb  
Rails.application.routes.draw do  
  get "welcome/index"  
  root to: "welcome#index"  
end  

이제 우리는 이 간단한 예제를 모든 CSS, JavaScript 구성 요소가 작동하도록 😬 충분히 복잡하게 만들어야 합니다.
걱정하지 마세요. 아래 코드를 복사하여 app/views/welcome/index.html.erb에 붙여넣으세요.

<!-- inside app/views/welcome/index.html.erb -->  
<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

<main>
  <section class="py-5 text-center container">
    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
        <h1 class="fw-light">Album example</h1>
        <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
        <p>
          <a href="#" class="btn btn-primary my-2">Main call to action</a>
          <a href="#" class="btn btn-secondary my-2">Secondary action</a>
        </p>
      </div>
    </div>
  </section>
</main>

다음을 실행하여 애플리케이션이 작동하는지 확인합니다.

$/myapp> bin/rails server  

브라우저에서 localhost:3000을 엽니다.



좋아, 지금까지 스타일이 없습니다.

3. 프런트 엔드 관리자 선택

역사적인 이유로 Rails 6에는 프런트엔드 자산(CSS, JavaScript, 이미지 등)을 관리하는 두 가지 도구가 있습니다. 오래된 것의 이름은 "Sprockets"이며 Rails 범위 밖에서 많이 사용되지 않습니다. 새로운 것의 이름은 "Webpacker"이며 성숙하고 널리 사용되는 Webpack에 의존합니다. 따라서 특히 webpacker 버전 5 이후로는 새 프로젝트에 더 이상 Sprockets를 사용하지 않는 것이 좋습니다. 훨씬 더 안정적이며 여러 팩을 처리할 수 있습니다.

Gemfile에 webpacker 버전 5 이상이 포함되어 있는지 확인하세요.

gem 'webpacker', '~> 5.0'  

그렇지 않은 경우 위와 같이 버전 5를 포함하고 "번들 설치"를 실행합니다.

이제 webpacker가 JavaScript뿐만 아니라 모든 자산을 처리하기를 원합니다. 다음과 같이 app/javascript를 app/frontend로 이름을 바꿉니다.

$/myapp> mv app/javascript app/frontend  

webpacker.yml에서 자산 폴더의 이름을 변경했음을 webpack에 경고합니다.

# Inside webpacker.yml, first lines  
default: &default  
source_path: app/frontend # Change here  

4. 부트스트랩 v5 설치

다음과 같이 최신 Bootstrap 버전 및 PopperJs(필수 종속성)를 추가합니다.

$/myapp> yarn add [email protected]  
$/myapp> yarn add @popperjs/[email protected]  

5. 부트스트랩을 애플리케이션에 주입

5a) Boostrap의 JS 파일 삽입

다음과 같이 JS 파일 생성: app/frontend/js/bootstrap_js_files.js 및 Bootstrap 관련 JS 파일 가져오기:

$/myapp> mkdir app/frontend/js && touch app/frontend/js/bootstrap_js_files.js  

// inside app/frontend/js/bootstrap_js_files.js  

// import 'bootstrap/js/src/alert'  
// import 'bootstrap/js/src/button'  
// import 'bootstrap/js/src/carousel'  
import 'bootstrap/js/src/collapse'  
import 'bootstrap/js/src/dropdown'  
// import 'bootstrap/js/src/modal'  
// import 'bootstrap/js/src/popover'  
import 'bootstrap/js/src/scrollspy'  
// import 'bootstrap/js/src/tab'  
// import 'bootstrap/js/src/toast'  
// import 'bootstrap/js/src/tooltip'  

모든 Bootstrap JS 파일을 가져오지 않고 프로젝트에 필요한 파일만 가져옵니다(navbar용).

이제 이 파일을 기본 JS 파일 app/frontend/packs/application.js로 가져옵니다.

// inside app/frontend/packs/application.js  

// Add this line  
import '../js/bootstrap_js_files.js'  

5b) Bootstrap의 스타일 주입

기본 CSS 파일 만들기

$/myapp> touch app/frontend/packs/application.scss  

내부에서 Bootstrap 가져오기

// inside app/frontend/packs/application.scss  

// Just a quick ugly style to see if our CSS works  
h1 {  
  text-decoration: underline;  
}  

// Import Bootstrap v5  
@import "~bootstrap/scss/bootstrap";  

이제 app/views/layouts/application.html.erb 내에서 기본 CSS 파일이 어디에 있는지 Rails에 알려주세요.

<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- Warning !! ensure that "stylesheet_pack_tag" is used, line below -->
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

5c) 모든 것이 작동하는지 확인

Rails 서버를 중지하십시오. 많은 프런트엔드 자산을 변경했으므로 레일 서버를 다시 시작하기 전에 약간의 정리/재컴파일을 수행합니다.

$/myapp> bin/rails assets:clobber  
$/myapp> bin/rails webpacker:compile  
$/myapp> bin/rails server  

그리고 localhost:3000에서 브라우저를 엽니다.

스타일이 부트스트랩처럼 보이면 예! Bootstrap의 CSS 파일 가져오기가 작동했습니다.

햄버거 메뉴를 클릭하면 내비게이션 표시줄이 전환됩니다. 부트스트랩의 JS 파일 가져오기가 작동했습니다.

6 앞으로 더

최종 코드를 찾을 수 있습니다here. 이 결과를 얻기 위해 관련된 단계의 수를 고려할 때 오늘은 여기까지입니다. 그러나 다음을 추가하고 싶습니다.

심층 부트스트랩 사용자 정의를 얻기 위해 SCSS 파일을 복사/붙여넣기하는 방법,

이미지 관리 방법

글꼴 관리 방법

자산을 최적화하는 방법

아마도 지금 생각하지 않는 다른 것들일 것입니다. 계속 지켜봐!