이 게시물의 TLDR 버전>>here<<


Rails 6에서 부트스트랩을 사용할 수 있도록 하는 많은 가이드와 경로가 있습니다.

수십 개의 튜토리얼과 프로덕션 애플리케이션을 분석한 결과 아래가 가장 "올바른"경로인 것 같습니다.

Rails 5에서는 일반적으로 부트스트랩 JS 및 CSS 파일을 "다운로드"하는 gem bootstrap을 사용합니다.

Rails 6에서 webpacker를 사용하고 있으므로 올바른 방법은 패키지를 설치하는 것입니다. Webpacker는 "yarn package manager"와 함께 작동하기에 적합합니다.

Bootstrap에는 공식yarn package이 있습니다. 즉, gem을 설치하는 대신 yarn add bootstrap과 같은 명령으로 설치할 수 있습니다!

그러나 부트스트랩에는 설치해야 하는 jquery 및 popper.js와 같은 일부 종속성이 있습니다.

또한 Rails 5에서는 app/assets/stylesheets/application.css에서 스타일시트를 사용했습니다.



그리고 응용 프로그램에 이 파일을 사용하도록 지시하기 위해 Rails 5의 application.html.erb에서 다음 줄을 application.html.erb에 추가했습니다.

= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

Rails 6에서는 javascripts 폴더 안에 스타일시트를 컴파일할 것입니다.

시작하자:

console에서 다음 명령을 실행합니다.

yarn add jquery popper.js bootstrap

부트스트랩을 실행하는 데 필요한 원사 패키지를 설치합니다.

파일environment.js에 다음을 추가합니다.

const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  }))
module.exports = environment

폴더를 생성합니다app/javascript/stylesheets .

폴더app/javascript/stylesheets에서 새 파일application.scss을 만듭니다.



우리는 거기에 모든 CSS를 배치할 것입니다.

app/javascript/stylesheets를 application.html.erb에서 사용할 수 있도록 합니다.

application.html.erb는 다음과 같아야 합니다.

= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' 
= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' 
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' 

stylesheet_pack_tag 에 주목하십시오.

마지막으로 application.js에 추가합니다.

import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
require("stylesheets/application.scss")

처음 2개의 "가져오기"명령은 원사에서 가져온 부트스트랩 JS 및 CSS를 추가합니다.

마지막 "require"는 변경 사항을 추가할 때마다 app/javascript/stylesheets/application.scss에 추가한 모든 항목을 컴파일합니다.

이제 모든 보기에서와 같이 부트스트랩 클래스를 추가할 수 있습니다.

<span class="badge badge-secondary">Thanks Yaro! It works!</span> 

그러면 부트스트랩 배지가 추가됩니다.

만세! 부트스트랩이 설치되었습니다!😊

추신 actiontext를 추가하려는 경우 app/javascript/stylesheets/application.scss 아래에 배치하는 것이 좋습니다.
@import "./actiontext.scss";

관련 링크

TLDR version of this post

see the official Bootstrap docs here

Bootstrap yarn package

그게 다야 🤠

이 기사가 마음에 드셨나요? 저를 따르십시오! 더 재미있는 것을 게시하도록 동기를 부여할 것입니다!