Bootstrap（和 jquery）、webpack、rails - 没有完全集成

Question

第二次尝试通过 webpack 而不仅仅是从 CDN 加载 Rails 应用程序的引导程序（和 jquery）。 我在这里关注了这篇很棒的帖子：https://stevepolito.design/blog/rails-6-bootstrap-4-webpacker-tutorial/ - 我知道这引用了 bootstrap 4（我正在尝试使用最新的 bootstrap 5），我认为这可能是问题所在。 我已经调整 popper.js 被 @popper.js/core 替换（即“纱线添加”行）。

会发生以下情况： 我已经从引导网站中删除了示例代码，以检查工具提示、弹出框和模式是否有效。

• 工具提示可以使用，但它们的位置不起作用（它们都显示在顶部，而不是底部/右侧/左侧）
• modals 根本不起作用 - 我可以点击，但没有任何反应
• 弹出框有效，但只显示标题 - 不显示内容

javascript 控制台没有给出任何错误。但是，当我手动尝试 jquery.version 时，我得到一个“未捕获的 ReferenceError：jquery 未定义”。

这是我的 config/webpack/environment.js（我插入了 window.jquery 行）：

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

environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        jquery: 'jquery/src/jquery',
        'window.jQuery': 'jquery/src/jquery',
        'window.Tether': "tether",
        Popper: ['popper.js', 'default'],
    })
)


module.exports = environment

这是我的 app/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

require("jquery")

import "bootstrap"
import "../stylesheets/application";
document.addEventListener("turbolinks:load", function () {
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
        $('[data-toggle="popover"]').popover()
    })
})

这是我的 app/stylesheets/application.scss（样式似乎可以正常工作）：

@import '~bootstrap/scss/bootstrap'

任何帮助表示赞赏。我确实尝试过搜索 - 有很多关于类似问题的帖子，但我还没有找到与此问题相关的任何内容。

Answer 1

要使 Bootstrap5 Rail 6 工作：

yarn add jquery
yarn add bootstrap@next
yarn add @popperjs/core

更改config/webpack/environment.js的内容：

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
   new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery',
      Popper: ['popper.js', 'default'],
   })
)
module.exports = environment

在app/assets/stylesheets/application.scss: 处导入引导 css：

 @import "bootstrap/scss/bootstrap";

然后将app/javascript/packs/application.js的内容设置为：

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

require("jquery")
require("@popperjs/core")
import "bootstrap"
// import { Modal } from 'bootstrap'
import { Tooltip, Popover } from 'bootstrap'

jQuery(function () {
  // alert(123456)
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new Tooltip(tooltipTriggerEl)
  })

  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new Popover(popoverTriggerEl)
  })
})

成功的画面：