无法使用Bootstrap-5脚本和Rails6 (尽管这里有许多问答：

Question

这里是JS/Bootstrap和webpack的超级初学者(熟悉超文本标记语言、(S)CSS和PHP，现在尝试RoR ...)

我正在尝试将Bootstrap-5连接到Rails-6。我已经读了至少10篇博客文章和许多A&A在这里，但仍然没有运气。我想创建一个超级简单的导航栏-或多或少直接从Bootstrap模板复制，但下拉菜单和折叠菜单不起作用。我手动将引导程序脚本与其CDN中的<script>标记链接起来-这确实起到了作用，但当然不应该是解决方案。那么，我忽略了什么让引导脚本在Rails6上工作的愚蠢事情呢？特别是，我正在研究this post here -但仍然没有成功:(

我的app/javascript/packs/application.js中有这一行：

import 'bootstrap'

我将下面这几行添加到我的config/webpack/environment.js ment.js中：

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

在app/stylesheets/application.scss (是的，我重命名为scss)中，我有

@import "bootstrap/scss/bootstrap";

在app/views/layout/application.html.erb中，我不确定要包含什么--我现在有三行代码(添加了第三行)：

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

webpack编译器没有给出任何错误。我做错了什么？

Answer 1

您可以按如下方式在布局/application.html.erb文件中添加脚本

 <%= javascript_pack_tag 'lightbox', 'data-turbolinks-track': 'reload', defer: true %>
    <%= javascript_pack_tag 'tiny-slider', 'data-turbolinks-track': 'reload', defer: true %>
    <%= javascript_pack_tag 'main', 'data-turbolinks-track': 'reload', defer: true %>

(更改文件名以适合您的应用程序/文件名)，这是使用webpacker在Rails6中包含额外js文件的首选(也是可行的)方法/webpack