Enable jQuery and Bootstrap in Rails 6 (Rails 6)

I wanted to be able to use jQuery and Bootstrap when creating an application with Ruby on Rails, so make a note of the procedure. (Using Webpacker.)

Introduced jQuery, Bootstrap, popper.js (used by Bootstrap) in __1.yarn. __

Execute the following under the application directory.

yarn add jquery bootstrap popper.js

__2. webpack settings __ Add the description of environment.js of app / config / webpack. (This allows you to use $ and Bootstrap Javascript without import or require.)

environment.js


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

//from here
const webpack = require('webpack');

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: 'popper.js'
  })
);
//Added so far.

module.exports = environment

__3. Import Bootstrap JS, CSS __ Import Bootstrap JS with application.js in app / javascript / packs. Create application.scss in app / javascript / stylesheets and import Bootstrap CSS.

application.js


import 'bootstrap';
import '../stylesheets/application';

application.scss


@import '~bootstrap/scss/bootstrap';

__4. Load JS and CSS built by Webpacker from the application side __ Add the following two sentences in the head of app / views / layouts / application.html.erb.

erb:application.html.erb


<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

That's it.

Recommended Posts

Enable jQuery and Bootstrap in Rails 6 (Rails 6)
[Webpacker] Summary of how to install Bootstrap and jQuery in Rails 6.0
Introducing Bootstrap and Font-Awesome (Rails)
Remove "assets" and "turbolinks" in "Rails6".
CRUD features and MVC in Rails
How to introduce jQuery in Rails 6
[Rails 6] Customize Bootstrap in Rails + Bootstrap 5.0.0-alpha environment
Rails and FormData
Rails Bootstrap introduced
[Rails] Introducing jquery
Group_by in Rails
[Rails] Use jQuery
(Basic authentication) environment variables in rails and Docker
How to use JQuery in js.erb of Rails6
[Ruby on Rails] How to install Bootstrap in Rails
[Rails] Ranking and pagination in order of likes
Summary of frequently used commands in Rails and Docker
Rails valid? And invalid?
Model association in Rails
Adding columns in Rails
Introducing Bootstrap to Rails 5
Introducing Bootstrap to Rails !!
Change date and time to Japanese notation in Rails
Disable turbolinks in Rails
CSRF measures in Rails
I put Bootstrap in Rails6. (Sprockets :: Rails :: Helper :: AssetNotPrecompiled handling)
^, $ in Rails regular expression
Calendar implementation and conditional branching in Rails Gem simple calendar
Use images in Rails
Understand migration in rails
[Rails Struggle/Rails Tutorial] What you learned in Rails Tutorial Chapters 4 and 5
Get location information in Rails and sort in ascending order
Split routes.rb in Rails6
Implement markdown in Rails
Differences between namespace, module, scope and as in Rails routing
[Rails] Introducing Travis CI and getting stuck in db: create
Implementation policy to dynamically save and display Timezone in Rails
Implement login function in Rails simply by name and password (1)
Implement login function in Rails simply by name and password (2)
[Rails] How to define macros in Rspec and standardize processing
How to deploy jQuery in your Rails app using Webpacker
Implement login function simply with name and password in Rails (3)
Implement user registration function and corporate registration function separately in Rails devise
[Rails] Find_each loops endlessly and eats up memory in production
Get UserAgent in [Rails] controller
Implement application function in Rails
Declarative transaction in Rails #ginzarb
Implement follow function in Rails
[Rails] N + 1 problems and countermeasures
Rails: Difference between resources and resources
Rails Posts and User Linkage
[Rails] require method and permit method
Enable strong parameters in devise
Rails "render method" and "redirect method"
Rails Tutorial Records and Memorandum # 0
Japaneseize using i18n with Rails
rails path and url methods
Mock and stub in RSpec
Implement LTI authentication in Rails
Rails is difficult and painful!
Error in rails db: migrate