Rails 6 webpacker 引入 bootstrap 5, boostrap-icons, jQuery

环境

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

步骤

  1. 安装bootstrapjquerypopperjs
yarn add bootstrap jquery @popperjs/core bootstrap-icons
  1. 创建app/javascript/styles/application.scss文件,内容如下
@import '~bootstrap/scss/bootstrap';
  1. app/javascript/packs/application.js里边添加如下内容
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap-icons/font/bootstrap-icons.css'
import '../styles/application.scss'

  1. 修改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

点赞

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注