如何使用 Rails + Webpack 配置 Bootstrap 插件？

Question

我正在使用 webpack 設置一個新的 rails 項目，但我不知道如何啟用 Bootstrap 插件（工具提示、警報等）。

1) 安裝的依賴項：

yarn add bootstrap jquery popper.js

2）我需要app/javascript/packs/application.js的模塊：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("popper.js")
require("bootstrap")

3) 在全局范圍內啟用$ y jQuery ：

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

4）在我看來：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip">
  Button
</button>

我知道 JQuery 正在工作，因為我可以從瀏覽器控制台運行$('#some-id')類的東西。 但是我不能使用 Bootstrap 的插件。 該按鈕不顯示工具提示。

如果我輸入$('#some-id').tooltip()或$('#other-id').alert()我得到以下錯誤：

未捕獲的類型錯誤：$.alert 不是函數

我怎樣才能解決這個問題？ 我讀過我需要單獨導入插件，但它對我不起作用：

import 'bootstrap/js/dist/alert';

有什么我想念的嗎？

Answer 1

嘗試這個

Rails 6.0.1

config/webpack/enviornment.js

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

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
  })
)

module.exports = environment

app/javascript/packs/application.js

import "../stylesheets/application"

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import 'bootstrap/js/src/tooltip'
import 'bootstrap/js/src/alert'

import './main'

window.$ = window.jQuery = $ // make $ available in console for debugging

app/javascript/packs/main.js

// Wait for turbolinks load event
$(document).on('turbolinks:load', () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('.alert').alert()
})

app/javascript/stylesheets/application.scss

$primary: #757575;
$light: #e9ecef;

@import 'bootstrap';
@import 'custom.css';

加載上面的樣式表

layouts/application.html.erb 。

添加<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

或者用stylesheet_link_tag替換stylesheet_pack_tag 。 如果您不想在assets/stylesheets表中使用樣式assets/stylesheets

Answer 2

將這些行添加到app/javascript/packs/application.js

import * as bootstrap from 'bootstrap'

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

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

為 B5 導入 popper.js 是yarn add @popperjs/core

參考： Bootstrap5 工具提示

我也面臨警報問題，我使用了 bootstrap5 警報文檔代碼，然后它會正常工作。