物化 jQuery 在 Rails 6 中不起作用

Posted 2023-05-09

【中文标题】物化 jQuery 在 Rails 6 中不起作用

【英文标题】：Materialize jQuery is not working in Rails 6

【发布时间】：2020-08-26 13:53:35

【问题描述】：

在 Rails 版本 6 中添加 materialize-sass jquery 函数时出错

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

//= require jquery
//= require materialize

$(document).on('turbolinks:load', function () 
    $('.sidenav').sidenav();
);

错误：

application.js:10 Uncaught TypeError: $(...).sidenav is not a function
    at htmlDocument.<anonymous> (application.js:10)
    at HTMLDocument.dispatch (jquery.js:4535)
    at HTMLDocument.elemData.handle (jquery.js:4355)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

【参考方案1】：

您正在将 sproket 与 webpacker 混为一谈

从 webpacker 入口点 application.js 中删除以下是 sproket 语法的行

//= require jquery
//= require materialize

假设您已经使用yarn install 安装了materialize，请添加以下行代替以上行

import 'materialize-css/dist/js/materialize'

您还需要样式。为此创建app/javascript/stylesheets/application.scss 文件并将以下行放入其中

@import 'materialize-css/dist/css/materialize';

现在将这个scss 文件导入您的application.js 使用

import '../stylesheets/application'