Install Bootstrap with Webpack with Rails 6 Beta
For those of you who are going to give Rails 6 Beta a test run here is how I have installed Bootstrap 4.3.1 and configured with Webpack
Step 1:
yarn add bootstrap@4.3.1 jquery popper.js
Step 2:
in config/webpack/environment.js add the following:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
Step 3:
in app/javascript/packs/application.js add the following:
import 'bootstrap'
import './src/application.scss'
step 4:
create the following folder app/javascript/packs/src and create the file 'application.scss and place @import '~bootstrap/scss/bootstrap';
This should get bootstrap 4 up and running with Rails 6 Beta and webpack!
I've been working on getting Bootstrap 4 up and running with Rails 6 Beta 3 and have a simple Popper.js I am testing, that still isn't firing. I noticed in webpack\environment.js I had another version of this different from yours. Can you explain why you have append instead of prepend
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
Neither solution has worked for me yet, so just wondering where I am going off the Rails so to speak.
My application.js currently has the following:
import 'bootstrap/dist/js/bootstrap.bundle'
import 'jquery/dist/jquery.slim'
import 'popper.js/dist/esm/popper'
require("@rails/ujs").start()
require("@rails/activestorage").start()
hey Guillermo (hope i spelled that right).
im not gonna lie, im not a webpack expert by any stretch. This guide was pieced together by me over a few days of struggling to get it set up and loading boot strap.
ill collect the best explained stack questions and post them here
Updated:
Rails 6 with Bootstrap and configured with Webpack
Step 1:
yarn add bootstrap jquery popper.js
Step 2:
in config/webpack/environment.js add the following:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
Step 3:
in app/javascript/packs/application.js add the following:
require("bootstrap/dist/js/bootstrap")
note: doesn't need to import jquery , popper once initialized as webpacker plugin
step 4:
in app/assets/stylesheets/application.css add the following:
@import "bootstrap/scss/bootstrap";
or
*= require bootstrap/scss/bootstrap
note: rails-sass can pick file from node modules
This get bootstrap 4 up and running with Rails 6 Beta and webpack!
Hi Guys, this is great. I came across a recent issue with webpacker not compiling and hence creating issues. This is the github discussion:
https://github.com/rails/webpacker/issues/2109
basically in your babel.config.js swap from corejs: 3 to corejs:false anywhere it appears.
this solved my frustration...
@Recker Swartz : You the MVP. Been trying to deploy to Heroku with OP's setup, however it wouldnt load Bootstrap when deploying, although works on localhost.
Now it loads properly and I can also define when it should load in relation to other stylesheets in application.css
@Daniele Deltodesco
Hi. I was just able to fix this. Heroku doesn't seem to mix well with Webpack as it tries to find bootstrap/scss/bootstrap in the app/assets/stylesheets folder. You have to point the import out of the folder to node_modules where Bootstrap stored in.
Make sure that your app/assets/stylesheets/application.css is renamed to application.css.scss and change @import "bootstrap/scss/bootstrap"; to @import "../../../node_modules/bootstrap/scss/bootstrap.scss";
Locally it works, but when I push the code to Heroku the assets are not precompiled. No CSS or JS present apparently.
Do I need to add yarn add bootstrap@4.3.1 jquery popper.js to my Procfile or somewhere when deploying to Heroku?
@Ivan, no, not during deploy. You should already have done that so they're added to your package.json. The assets:precompile step will make sure they're installed during deploy.
Heroku does need you to add the node buildpack alongside the ruby buildpack so you can use yarn.
heroku buildpacks:add heroku/nodejs
heroku buildpacks:add heroku/ruby
Hi,
tired every option here and some more. Heroku is still not deploying. Same error precompiling assets fail. Does anyone have any other suggestions? I'm open to other server options too. Need something temp short term.
Hello,
I was able to get Bootstrap working with this method but I've run into a problem where my changes to the css files were overridden by some .scss files. Is there a 'main' css/scss file in my rails app that I can use to modify my app?
