Hello,
I have trouble using a Bootstrap 5 theme (like those we can find on themes.getbootstrap.com, for instance) with a Rails 7 application I'm building. I'm not sure which is the best way to integrate it.
First I intended to install Bootstrap getting rid off nodejs, as explained in this article : https://dev.to/renuo/rails-7-bootstrap-5-and-importmaps-without-nodejs-4g8. It seemed an interesting way of doing it so I wanted to give it a try.
But afterwards, I have a feeling that it make integrating my theme very uneasy. A lot of dependencies like flatpickr or JS features don't work properly.
So at this point, I'm wondering if integrating my theme in a more "classical" maner (as explained there https://eagerworks.com/blog/step-by-step-guide-on-integrating-a-bootstrap-theme-into-rails-7, for instance) wouldn't be a better solution.
Does anyone here is a Bootstrap theme integration warrior and could give some advice, even perhaps a hand?
Off course, I've kept it short but I will gladely share any additional info about all this!
Thanks for reading!

Maëlla

I also have similar questions and inquiries, hoping to receive answers soon

I was updating a Rails 7 app to Rails 8 and considered moving to importmaps until I read too many comments of this nature: "Don’t use importmaps if you need to use JavaScript libraries that include CSS." I suggest doing some more searching before jumping to importmap. I have Bootstrap but not themes.

Since Rails 7 can be set up with different JS/CSS bundling strategies (Importmap, ESBuild, Webpack, Propshaft, or just Sprockets), the exact method depends on what you pickedwhen you created your app.

Hello,
Thank you all for your comments.
It's been a while I've posted this question and I found my way to a working solution by importing only the CSS files of the theme as is.
So, I have a theme.scss file that is imported in my application.scss file.
For the rest, I use importmap + stimulus. It's a bit of configuration at the begining but, in the end, I find it quite convenient.

For instance, for flatpickr:

in importmap.rb

pin "stimulus-flatpickr" # @3.0.0
pin "flatpickr", to: "https://ga.jspm.io/npm:flatpickr@4.6.13/dist/esm/index.js"
pin "flatpickr/dist/l10n/fr.js", to: "https://ga.jspm.io/npm:flatpickr@4.6.13/dist/l10n/fr.js"
pin "flatpickr/dist/l10n/es.js", to: "https://ga.jspm.io/npm:flatpickr@4.6.13/dist/l10n/es.js"
pin "flatpickr/dist/l10n/nl.js", to: "https://ga.jspm.io/npm:flatpickr@4.6.13/dist/l10n/nl.js"
pin "flatpickr/dist/l10n/default.js", to: "https://ga.jspm.io/npm:flatpickr@4.6.13/dist/l10n/default.js"

in application.scss

@import url("https://ga.jspm.io/npm:flatpickr@4.6.9/dist/flatpickr.min.css");

flatpickr_controller.js (in the javascript > controllers folder)

import { Controller } from "@hotwired/stimulus"
import flatpickr from "flatpickr"
import { French } from "flatpickr/dist/l10n/fr.js"
import { Spanish } from "flatpickr/dist/l10n/es.js"
import { Dutch } from "flatpickr/dist/l10n/nl.js"
import { english } from "flatpickr/dist/l10n/default.js"

const currentUrl = document.URL;

// Connects to data-controller="flatpickr"
export default class extends Controller {
... {your code} ...
}

in the view

<%= form.input :birth_date, as: :string, input_html: { data: {controller: "flatpickr", flatpickr_default_date: @user.birth_date} } %>