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