2 Nights
I spent the past two nights trying to configure my rails 6.0.0 application to work with the webpacker gem and for the life of me I could not get bootstrap working.
I finally got it. Changing a few settings in the webpacker.yml configuration file and renaming a few files fixed the problems I was having.
I am going to walk through this commit file by file near line by line because it has the details of the fix in it. Most everything else is cruft.
Gemfile - Bootstrap Gem
I added the bootstrap gem @ 4.3.1 to my project, Gemfile to add bootstrap the conventional way thinking it may make a difference.
I don’t think it did.
I plan to go back and remove it from the gemfile.
Gemfile.lock was update as well
Application.js - app/webpack/packs/application.js
You’re going to need to require that file, no wait, just import it.
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require("../packs/application")
require("bootstrap")
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
import "./style"
import "./application";
$(function() {
$('[data-toggle="tooltip"]').tooltip();
});
$(function () {
$('[data-toggle="popover"]').popover()
})
$(document).on('load', function () {
$('[data-toggle="tooltip"]').tooltip();
)};
Application.scss -> styles.scss
I think the trick to making this work was renaming the Application.scss file to styles.scss.
I think what was happening originally was the webpacker configuration file was loading the stylesheet instead of the js file. What a nightmare.
Javascript Environment - config/webpack/environment.js
Fixed the naming for jQuery and $ to straight up jQuery but I don’t think this changed jquery usage.
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
Webpack Configuration - config/webpacker.yml
Two massive changes include setting webpack_compile_output: to true and setting extract_css to true as well.