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.

At this point, your Rails 7 app has Bootstrap 5 Among Us Free and your theme layered on top.

I tried the importmap approach too and ran into similar issues once I started adding themes with lots of JS dependencies. Switching back to the “classic” setup with Node and Webpacker/Vite made things smoother for me, especially when handling plugins like flatpickr. It’s a bit more setup, but less hassle long term. Kind of like crazy cattle 3d —sometimes the simple route looks easier, but the chaos only really settles when you use the right tools!

Please edit according to the following steps:

• Step 1: Update Your Frontend HTML
• Step 2: Update Your Stimulus Controller
• Step 3: Update Your Backend Controller

Hope my solution helps you!

Has anyone else found importmaps a bit restrictive for complex themes in Rails 7? I initially tried the importmaps approach, as described in the article you cited, thinking it would be cleaner. However, similar to your experience, I ran into dependency issues and JavaScript features breaking. I eventually switched back to a more traditional asset pipeline setup and things became much smoother.

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} } %>