
MAELLA
Joined
Activity
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} } %>
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