Note
We setup Bootstrap scss files upon asset pipeline for avoide slowing down Vite HMR. Custom stylesheets can be added inside vite app/frontend/. We setup one popover to make it working for checking if all the popper.js and bootstrapp javascript is working.
Links
Bootstrap/getting-started/vite
Prerequesites
Asset Pipeline
gem 'bootstrap', '~> 5.2.0'
$ bundle install
add app/assets/stylesheets/_settings.scss for configuring bootstrap sass variables
rename app/assets/stylesheets/application.css to .scss if it isnt already done
remove the lines //= require tree and //= require . if it isnt yet.
@import "settings";
@import "bootstrap";
We use only the scss files from the gem. On Foundation i did the same by smylinking to the yarn package into the asset pipeline. The javascript we get from the yarn package:
Javascript Packages
$ npm i 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
window.addEventListener('load', (event) => {
initPage();
});
window.addEventListener('turbo:render', (event) => {
initPage();
});
function initPage() {
// initialize popovers
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
}
}
Layout
make sure the stylesheet_link_tag is present like described
Test View
%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
=> If the popover works and looks like this, bootstrap styles are working, popper.js is working and popovers are initialized.
YIPPIE!
P.S.:
Symlinking SASS variables
Inside frontend/stylesheets/, create a symlink like this:
$ ln -s ../../assets/stylesheets/_settings.scss .
Then from all the stylesheets, by example frontend/stylesheets/components/button.scss, import it like this:
@import '../settings';
symlinks to a file are well handled by git (otherwise than symlinks to a folder) and they should landing well on production machine.
Oldest comments (0)