This guide may work, but as of 2024, we would prefer to build new projects without any style framework. CSS has become feature-rich enough.
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.
(Alternative would be: minify the bootstrap CSS and add the minified version to the frontend folder. Then, Vite is clever enough for not loosing time for bundling that. On that way HMR would also rely fast and its cleaner because having only one asset pipeline)
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.
Top comments (0)