在Ruby on Rails中使用Tailwind Elements时,JavaScript无法正常工作

bbuxkriu  于 2023-10-18  发布在  Ruby
关注(0)|答案(1)|浏览(85)

我刚刚开始了一个新的rails 7项目,TailwindCSS使用了新的rails new my-app --css tailwind语法。Tailwind CSS工作正常。我想从tailwind元素添加一个导航栏,我遵循了https://tailwind-elements.com/quick-start/的步骤。导航栏中的css可以工作,但是子菜单的打开和关闭(我假设都是由JavaScript运行的)不能。
在深入研究细节时,我在rails s日志中看到了以下行

Started GET "/TW-ELEMENTS-PATH/dist/js/index.min.js" for 127.0.0.1 at 2023-02-02 09:13:48 -0600

ActionController::RoutingError (No route matches [GET] "/TW-ELEMENTS-PATH/dist/js/index.min.js"):

我做了npm install tw-elements安装和tailwind.config.cs编辑,我错过了什么?是否有一些我不知道的与Ruby on Rails的冲突?我真的需要创建一个路由吗?或者这是一个没有正确安装的信号?
下面是我插入<script>行的application.html.erb

<!DOCTYPE html>
<html>
<head>
    <title>MyApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind" , "inter-font" , "data-turbo-track" : "reload" %>
    <%= stylesheet_link_tag "application" , "data-turbo-track" : "reload" %>
    <%= javascript_importmap_tags %>
    <!--here is the line I added -->
    <script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>
</head>
<body>
    <%= render 'layouts/navigation' %>
    <main class="container mx-auto mt-28 px-5 flex">
        <%= yield %>
    </main>
</body>
</html>

我确实尝试了替代步骤4,将import 'tw-elements';放入app/javascript/controllers.index.js中,但没有任何效果。

yc0p9oo0

yc0p9oo01#

刚刚遇到了同样的问题,并在这里发布了解决方案。
完成tailwind elements设置中的步骤后,而不是最后一步(脚本标记):
1.将它们添加到assets.rb初始化器中

Rails.application.config.assets.paths << Rails.root.join('node_modules/tw-elements/dist/js')
Rails.application.config.assets.precompile += %w( tailwind.css tw-elements.umd.min.js )

1.在application.rb中添加此行

//= require tw-elements.umd.min

1.在application.html.erb中添加script标记-注意结尾处的类型module

<%= javascript_include_tag 'tw-elements.umd.min', 'data-turbolinks-track': 'reload', type: "module" %>

解决方案基于this post
希望这对你有帮助!

相关问题