Skip to content

Instantly share code, notes, and snippets.

@yalab

yalab/bootstrap-memo.md

Last active July 20, 2022 20:29
Show Gist options
  • Save yalab/cad361056bae02a5f45d1ace7f1d86ef to your computer and use it in GitHub Desktop.
Save yalab/cad361056bae02a5f45d1ace7f1d86ef to your computer and use it in GitHub Desktop.
Download ZIP
rails5 + webpacker + bootstrap
Raw
bootstrap-memo.md 
$ 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>
@taab84
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
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
Copy link

The error I was getting + fix that worked for me: https://stackoverflow.com/questions/49107725/i-got-webpacker-error-when-running-the-rails-app-typeerror-environment-plugin

@dennisbot
Copy link

dennisbot commented Apr 10, 2018 •
edited
Loading

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
Copy link

capitalsav commented Apr 11, 2018 •
edited
Loading

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
Copy link

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
Copy link

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

@chibicode
Copy link

+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
Copy link

@iamajvillalobos thats work!. Thanks!

@mogongzi
Copy link

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