Hey there, I'm a complete beginner when it comes to JS, Bootstrap, and webpack, although I am familiar with HTML, (S)CSS, PHP, and currently diving into RoR.
My current challenge is connecting Bootstrap-5 to Rails-6. Despite reading numerous blog posts and forum threads, I still can't seem to get the Bootstrap scripts to work properly. While the styles are fine, the scripts for components like the dropdown and collapsed menu aren't functioning. I resorted to manually linking the Bootstrap scripts via a <script> tag from their CDN, which worked temporarily, but I know it's not the ideal solution. So, what simple step am I missing to make Bootstrap scripts play nice with Rails 6? I've looked at resources like this post on Stack Overflow, but still no luck.
In my app/javascript/packs/application.js file, I have this line:
import 'bootstrap'
Additionally, I made changes in my config/webpack/environment.js as follows:
const webpack = require("webpack")
environment.plugins.append("Provide",
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
)
Within app/stylesheets/application.scss (which I've renamed from .css to .scss), I added:
@import "bootstrap/scss/bootstrap";
As for app/views/layouts/application.html.erb, I wasn't entirely sure what to include, so I currently have these three lines (recently added the third one):
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Despite no errors from the webpack compiler, I'm clearly missing something. Any idea on what I might be doing wrong?