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 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 rtsinani commented Mar 6, 2018

+1 for @daryllxd comment.

@starpause

This comment has been minimized.

Copy link

@starpause 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 ThiagoRodrigues commented Mar 13, 2018

👍

@taab84

This comment has been minimized.

Copy link

@taab84 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 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 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 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 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 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 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:
{
}
@RomuloDevelop

This comment has been minimized.

Copy link

@RomuloDevelop RomuloDevelop commented Apr 26, 2019

@iamajvillalobos thats work!. Thanks!

@mogongzi

This comment has been minimized.

Copy link

@mogongzi mogongzi commented Feb 10, 2020

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!

Thanks, it works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment