Bootstrap下拉导航无法正常使用Rails 6

Question

我的下拉菜单在我的Rails 6应用程序中不起作用。请查看以下文件：

_ navigation.erb.html

<nav class="navbar navbar-static-top navbar-inverse">

    <div class="navbar-header">
      <a class="navbar-brand" href="/">Home</a>
    </div>
  <div class="nav-collapse collapse">
    <div class="nav pull-right">
      <a class="dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown">
        <span class="caret"></span>
        Menu
      </a>
       <ul class="dropdown-menu" role="menu">

        <li><%= link_to "Add New Festival", new_festival_path %></li>
        <li><%= link_to "Add New Review", new_review_path %></li>
        <li><%= link_to "View Festivals", festivals_path %></li>
        <li><%= link_to "View Reviews", reviews_path %></li>
        <li><%= link_to "View Cities", cities_path %></li>
        <li><%= link_to "Log Out", logout_path, method:'delete' %></li>
      </ul>

    </div><!--/.nav-collapse -->
  </div>
</nav>

这是我的application.js文件：

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.


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

这是我的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

[请让我知道是否有任何其他文件对于帮助解决此问题是否有价值。谢谢。

Answer 1

如果@hashrocket处于正确的位置并且您没有jQuery，那可能是由于您需要在[[exports之前的environment.js中执行以下操作：

environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  use: [{
    loader: 'expose-loader',
    options: '$'
  }, {
    loader: 'expose-loader',
    options: 'jQuery',
  }]
})

如果您还没有的话，还需要
npm install

expose-loader。>>希望有帮助！