安装 bootstrap-table 无法与 rails 6、webpack 和 bootstrap5 一起正常工作，而是在 table 上设置 bootstra4 版本

Question

我做了什么

我有一个项目，其中 bootstrap5 运行正常。我尝试用

安装 bootstrap-table

yarn add bootstrap-table

在 application.js 我得到：

import 'bootstrap-table/dist/bootstrap-table.min.js'
import 'bootstrap-table/dist/locale/bootstrap-table-de-DE.min.js'

并在 backend.sass 中：

@import '~bootstrap-table/dist/bootstrap-table.min.css'

详情

jquery 是用 yarn 添加的，是 v3.6.0，我有第一个

import $ from 'jquery' 在 application.js

并在 environment.js 中：

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

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

问题

所以现在样式应用不正确，它应用 bootstrap4 到 table class:

当我输入 bootstrap5 时，样式会被正确应用，否则不会。分页下拉菜单也不起作用。当我点击它时，什么也没有弹出。 bootstrap5 中的正常下拉菜单在 bootstrap-table.

之外自行工作

我试过的

我尝试过大量更改导入，安装不同的 yarn 包。我在 github 仓库中找到了 this issue。在 application.js 中添加常量对我不起作用。

他们写的 bootstrap 版本同样会在 index.js 中读出：

let bootstrapVersion = 4

try {
  const rawVersion = $.fn.dropdown.Constructor.VERSION

  // Only try to parse VERSION if it is defined.
  // It is undefined in older versions of Bootstrap (tested with 3.1.1).
  if (rawVersion !== undefined) {
    bootstrapVersion = parseInt(rawVersion, 10)
  }

出于某种原因 $.fn.dropdown.Constructor 对我来说是未定义的。试图更改导入来解决此问题，但不确定为什么它不起作用。

Answer 1

检查此处提供的答案 https://github.com/wenzhixin/bootstrap-table/issues/5837#issuecomment-952301379

通过以下方式帮助解决了问题：

// bootstrap.js
import 'bootstrap/dist/js/bootstrap'
window.bootstrap = {
  Tooltip: {
    VERSION: "5"
  }
}

而是在 application.js 中导入 Bootstrap Table 之前导入新的 bootstrap.js 例如：

import '../assets/js/bootstrap'
import 'bootstrap-table/dist/bootstrap-table.js'
import 'bootstrap-table/dist/bootstrap-table.min.css'

如果您尝试在 application.js

中添加 window.bootstrap ...，webpacker 可能会在导入后更改代码执行，因此可能已包含该文件

安装 bootstrap-table 无法与 rails 6、webpack 和 bootstrap5 一起正常工作，而是在 table 上设置 bootstra4 版本

installation of bootstrap-table not working properly with rails 6, webpack and bootstrap5, it sets bootstra4 version on table instead

webpack

bootstrap-table

ruby-on-rails-6

bootstrap-5

我做了什么

详情

问题

我试过的