Стрелка раскрывающегося списка не работает для элемента меню bootstrap в Rails 6 с Webpacker - PullRequest
Новая
       27

Стрелка раскрывающегося списка не работает для элемента меню bootstrap в Rails 6 с Webpacker

0 голосов
/ 01 мая 2020 
Rails 6
Webpacker
Mac OS Catalina

Я начал с добавления bootstrap через пряжу: 

yarn add bootstrap jquery popper.js

Вот что я имею в своем приложении / javascript / packs / application. js

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

import "bootstrap"
import "@fortawesome/fontawesome-free/js/all";
import "../stylesheets/application"

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
})

const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

И в app / javascript / stylesheets / application.s css у меня есть: 

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-free";

Я пытаюсь реализовать некоторые элементы выпадающего меню с помощью кнопки bootstrap. Код вида: 

.dropdown
  button#AccountsMenu.btn.btn-primary.dropdown-toggle aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"
    = t('nav_bar.accounts')
  = render ('layouts/navbar_partials/accounts')

.dropdown
  button#CustomersMenu.btn.btn-primary.dropdown-toggle aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"
    = t('nav_bar.customers')
  = render ('layouts/navbar_partials/customers')

и в приложении / views / layouts / navbar_partials / Customers. html .slim, у меня есть: 

.dropdown-menu aria-labelledby="CustomersMenu"
  button.dropdown-item type="button"
    = link_to  t('customers.active_customers'), active_customers_customers_path
  button.dropdown-item type="button"
    = link_to t('customers.menu.inactive_customers'), inactive_customers_customers_path

Когда я запускаю приложение ( из локальной среды разработки) я не получаю никаких сообщений об ошибках.

Я вижу кнопки в стиле bootstrap (см. одну из них на прикрепленном изображении), но когда я нажимаю на стрелку, ничего не происходит, и никакая активность не регистрируется в сеансе локального терминала, с которого я запускаю сервер rails.

enter image description here

В моем Gemdfile нет boostrap, но, насколько я понимаю, он не нужен. Я добавил его, чтобы увидеть, если это что-то меняет, но ничего не изменилось.

Это может быть связано с веб-упаковщиком, но я недостаточно знаю веб-упаковщик. Есть идеи?

config / webpack / environment. js, содержит следующее: 

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

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