Rails-7 및 Vite에서 부트스트랩 설정

메모

Vite HMR 속도 저하를 방지하기 위해 자산 파이프라인에 부트스트랩 scss 파일을 설정합니다. vite 내부에 사용자 정의 스타일시트를 추가할 수 있습니다app/frontend/. 모든 popper.js 및 bootstrapp 자바스크립트가 작동하는지 확인하기 위해 하나의 팝오버를 설정했습니다.

연결

Bootstrap/getting-started/vite

전제 조건

자산 파이프라인

gem 'bootstrap', '~> 5.2.0'

$ bundle install

부트스트랩 sass 변수 구성을 위한 추가app/assets/stylesheets/_settings.scss
아직 완료되지 않은 경우 app/assets/stylesheets/application.css를 .scss로 이름을 바꿉니다.

아직 없으면 //= require tree 및 //= require . 줄을 제거하십시오.

@import "settings";
@import "bootstrap";

gem의 scss 파일만 사용합니다. On에서는 에셋 파이프라인에 얀 패키지를 smylinking하여 동일한 작업을 수행했습니다. yarn 패키지에서 가져온 자바스크립트:

자바스크립트 패키지

$ yarn add bootstrap @popperjs/core

frontend/entrypoints/application.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' 

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

// initialize the page
$(document).on('turbo:render', function() {
    onPageLoad();
});
$(document).ready(function () {
    onPageLoad();
});

function onPageLoad() {

  // initialize popovers
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
})
}

형세
stylesheet_link_tag가 다음과 같이 있는지 확인하십시오.

테스트 보기

%button.btn.btn-lg.btn-danger{"data-bs-content" => "And here's some amazing content. It's very engaging. Right?", "data-bs-title" => "Popover title", "data-bs-toggle" => "popover", :type => "button"} Click to toggle popover

=> 팝오버가 작동하고 다음과 같이 표시되면 부트스트랩 스타일이 작동하고 popper.js가 작동하며 팝오버가 초기화됩니다.

이피!



추신.:

심볼릭 링크 SASS 변수

내부frontend/stylesheets/에서 다음과 같이 심볼릭 링크를 만듭니다.

$ ln -s ../../assets/stylesheets/_settings.scss .

그런 다음 모든 스타일시트에서 예를 들어 frontend/stylesheets/components/button.scss 다음과 같이 가져옵니다.

@import '../settings';

파일에 대한 심볼릭 링크는 git에 의해 잘 처리되며(폴더에 대한 심볼릭 링크 제외) 생산 시스템에 잘 착륙해야 합니다.