materialize-css 和 rails 6- 下拉菜单不起作用答案

【问题标题】：materialize-css and rails 6- dropdown does not workmaterialize-css 和 rails 6- 下拉菜单不起作用
【发布时间】：2021-10-20 19:35:47
【问题描述】：

我总是有这个错误： jquery.js:3428 Uncaught TypeError: $(...).dropdown 不是函数

这是我的 rails 6 代码： *app/javascript/packs/application.js:

window.jQuery = $;
window.$ = $;

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"



import 'materialize-css/dist/js/materialize';
import '../stylesheets/application';
Rails.start()
Turbolinks.start()
ActiveStorage.start()

*config/webpack/environment.js:

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require("webpack");

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.append(
  "Provide",
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    'Vel': 'velocity-animate',
    Popper: ["popper.js", "default"] // for Bootstrap 4
  })
);

module.exports = environment

*app/views/layouts/application.html.erb：

<!DOCTYPE html>
<html>
  <head>
    <title>Mvp4startup</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>

  <body>

    <header>
      <div class="navbar-fixed">
        <nav>
          <div class="container">
            <div class="nav-wrapper">
              <a href="#!" class="brand-logo">MVP4STARTUP</a>
              <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
              <ul class="right hide-on-med-and-down">
                <li><a href="#">Courses</a></li>
                <li><a href="#">Sign up</a></li>
                <li><a href="#">Login</a></li>
              </ul>
            </div>
          </nav>

          <ul class="sidenav" id="mobile-demo">
            <li><a href="sass.html">Courses</a></li>
            <li><a href="badges.html">Sign up</a></li>
            <li><a href="collapsible.html">Login</a></li>
          </ul>
        </div>
      </div>
    </header>
          
    <main>
        <%= yield %>
    </main>


    <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">MVP4STARTUP</h5>
            <p class="grey-text text-lighten-4">Bienvenue sur Azalearn la plateforme</p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="white-text">Useful links</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Facebook</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Twitter</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Instagram</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Github</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        © <%= Date.today().year %> Copyright MVP4STARTUP
        <a class="grey-text text-lighten-4 right" href="<%= pages_about_path %>">About us</a>
        </div>
      </div>
    </footer>    
    


  </body>

</html>

我到处检查但没有解决方案，并注意到我不是唯一遇到此问题的人。我已按照本教程将物化设计添加到我的应用程序中：https://medium.com/@guilpejon/how-to-install-materialize-css-in-rails-6-0-0-beta2-using-webpack-347c03b7104e。

我真的需要您的帮助才能使下拉菜单和移动侧边栏正常工作。

【问题讨论】：

请编辑您的帖子并将实际代码显示为文本而不是屏幕截图。其他人无法从您的图像中复制和粘贴。 See here了解详情。
您好，感谢您的建议，我已在评论中添加代码。

标签： jquery ruby-on-rails webpack materialize

【解决方案1】：

我找到了解决办法，直接用CDN导入materializecss，npm和yarn版本有问题。

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

【讨论】：

它适用于 Rails 6。