环境
- Rails: 6.1.3.2
- Ruby: 3.0.1
- Bootstrap: 5.0.2
- jQuery: 3.6.0
步骤
- 安装
bootstrap
,jquery
,popperjs
yarn add bootstrap jquery @popperjs/core bootstrap-icons
- 创建
app/javascript/styles/application.scss
文件,内容如下
@import '~bootstrap/scss/bootstrap';
- 在
app/javascript/packs/application.js
里边添加如下内容
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap-icons/font/bootstrap-icons.css'
import '../styles/application.scss'
- 修改
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