时间戳

首页 > 解决方案 > bootstrap-table 的安装无法与 rails 6、webpack 和 bootstrap5 一起正常工作，而是在 table 上设置 bootstra4 版本

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

问题描述

我做了什么

我有一个项目，其中 bootstrap5 工作正常。我试图安装引导表

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 添加了纱线，是 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 应用于表类：

在此处输入图像描述

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

我试过的

我尝试了很多更改导入，安装了不同的纱线包。我在 github repo 上发现了这个问题。添加常量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对我来说是未定义的。尝试更改导入以解决此问题，但不确定为什么它不起作用。

标签： webpackruby-on-rails-6bootstrap-5bootstrap-table

解决方案

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

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

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

而是在导入 Bootstrap 表之前导入新的 bootstrap.jsapplication.js例如：

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

该文件可能必须包含在内，因为如果您尝试在其中添加，webpacker 可能会在导入后更改代码window.bootstrap ...执行application.js

推荐阅读