Skip to content

Instantly share code, notes, and snippets.

@trivektor
Forked from yalab/bootstrap-memo.md
Created February 25, 2018 20:04
Show Gist options
  • Save trivektor/d3b6dfbb10b46e1a5b421625efebd67a to your computer and use it in GitHub Desktop.
Save trivektor/d3b6dfbb10b46e1a5b421625efebd67a to your computer and use it in GitHub Desktop.
rails5 + webpacker + bootstrap
$ echo 'gem "webpacker"' >> Gemfile
$ bundle install
$ rails webpacker:install
$ yarn add [email protected] 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment