Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
rails5 + webpacker + bootstrap
$ echo 'gem "webpacker"' >> Gemfile
$ bundle install
$ rails webpacker:install
$ yarn add bootstrap@4.0.0-beta jquery popper.js
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index d16d9af..86bf1a7 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -1,3 +1,10 @@
 const { environment } = require('@rails/webpacker')
 
+const webpack = require('webpack')
+environment.plugins.set('Provide', new webpack.ProvidePlugin({
+  $: 'jquery',
+  jQuery: 'jquery',
+  Popper: ['popper.js', 'default']
+}))
+
 module.exports = environment
// app/javascript/packs/bootstrap.scss
@import '~bootstrap/dist/css/bootstrap';
// app/javascript/packs/applicatoin.js
import 'bootstrap/dist/js/bootstrap';
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -6,6 +6,8 @@

     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'application' %>
+    <%= stylesheet_pack_tag 'bootstrap' %>
   </head>

   <body>
@daryllxd

This comment has been minimized.

Copy link

daryllxd commented Feb 15, 2018

Cool, though for me it's asking me to use append instead of set in environment.plugins.set, still works though! Thanks!

@rtsinani

This comment has been minimized.

Copy link

rtsinani commented Mar 6, 2018

+1 for @daryllxd comment.

@starpause

This comment has been minimized.

Copy link

starpause commented Mar 8, 2018

Gold! This is what I needed to add bootstrap to a react_on_rails project. Also, yes, +1 append rather than set

@ThiagoRodrigues

This comment has been minimized.

Copy link

ThiagoRodrigues commented Mar 13, 2018

👍

@taab84

This comment has been minimized.

Copy link

taab84 commented Mar 23, 2018

i implemented this to my project and webpack compile it very well but bootsrap objects are not rendred correctly (i'm using bootstrap-sass 3.3.7)
+1 for append instead of set

@jgrosche

This comment has been minimized.

Copy link

jgrosche commented Apr 2, 2018

I had to add this to webpack/environment.js to get this working

https://github.com/rails/webpacker/blob/master/docs/css.md#resolve-url-loader

@andreibondarev

This comment has been minimized.

@dennisbot

This comment has been minimized.

Copy link

dennisbot commented Apr 10, 2018

this worked for me:

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    JQuery: 'jquery',
    jquery: 'jquery',
    'window.Tether': "tether",
    Popper: ['popper.js', 'default'], // for Bootstrap 4
  })
)

module.exports = environment
@Capitalsav

This comment has been minimized.

Copy link

Capitalsav commented Apr 11, 2018

For me there little different solution.
I have:

gem 'rails', '~> 5.1.5'
gem 'webpacker', '~> 3.4'

package.json

"dependencies": {
    "@rails/webpacker": "3.4",
    "bootstrap": "3.3.7",
    "jquery": "^3.3.1",
    "jquery-ujs": "^1.2.2",
    "popper.js": "^1.14.3",
    "rails-ujs": "^5.2.0",
    "resolve-url-loader": "^2.3.0",
    "turbolinks": "^5.1.1"
  },

I have clear

config/webpach/environment.js

const { environment } = require('@rails/webpacker');
module.exports = environment;

In

javascript/packs/application.js

import 'jquery/src/jquery'
import 'jquery-ujs/src/rails'
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme'
import 'bootstrap/dist/js/bootstrap';
import 'style/application.scss'

and in

application.html.haml

= stylesheet_pack_tag 'application'
= javascript_pack_tag 'application'

All works fine.

@iamajvillalobos

This comment has been minimized.

Copy link

iamajvillalobos commented May 13, 2018

It works a lot better now, less code.

# Install bootstrap, jquery and popper.js
yarn add bootstrap jquery popper.js
# Create this file app/javascript/packs/src/application.scss
@import '~bootstrap/scss/bootstrap';
# Reference the new application.scss in your app/javascript/packs/application.js
import 'bootstrap'
import './src/application.scss'
# If you haven't changed it yet, use the pack_tags
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

All is good!

@sandipsubedi

This comment has been minimized.

Copy link

sandipsubedi commented Aug 7, 2018

@iamarmanjon Do I have to do anything else? Because when I do that no bootstrap is being loaded basically.

@chibicode

This comment has been minimized.

Copy link

chibicode commented Aug 9, 2018

+1 on environment.plugins.append instead of environment.plugins.set. Without that, you'll end up with this error:

Webpacker can't find application.js in /public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.