环境

• Rails: 6.1.3.2
• Ruby: 3.0.1
• Bootstrap: 5.0.2
• jQuery: 3.6.0

---

步骤

1. 安装bootstrap，jquery，popperjs

yarn add bootstrap jquery @popperjs/core bootstrap-icons

2. 创建app/javascript/styles/application.scss文件，内容如下

@import '~bootstrap/scss/bootstrap';

3. 在app/javascript/packs/application.js里边添加如下内容

import 'bootstrap/dist/js/bootstrap'
import 'bootstrap-icons/font/bootstrap-icons.css'
import '../styles/application.scss'

4. 修改config/webpack/environment.js文件的内容

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

// 下面这段是新添加的，begin
const webpack = require('webpack')
environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
    }))
// end

module.exports = environment

---

参考

在 Rails 6 中使用 jQuery 和 Bootstrap
Using Bootstrap Icons in Rails 6 with Webpacker