Jquery 如何使用Rubymine将JavaScript导入RoR项目？

我在Rubymine的RoR项目中使用JQuery时遇到了一个问题。我是RubyonRails新手，希望在我的项目中使用自举sass。 我按照Github引导存储库中的说明进行操作。我正在使用rails6.0.0

我的application.html.erb中有以下代码片段：

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#main-nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to 'SaaS', root_path, class: 'navbar-brand' %>
    </div>

    <div class="collapse navbar-collapse" id="main-nav-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Login", '#' %></li>
      </ul>
    </div> <!--      /.navbar-collapse-->
  </div>
</nav>

以及my application.scss中的导入：

@import "bootstrap-sprockets";
@import "bootstrap";

My application.js的require语句：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
//= require jquery
//= require bootstrap-sprockets

我已多次重新启动服务器并运行了

捆绑安装

。一、 另外，在运行服务器或单击按钮时不要出现任何错误

编辑： 将require语句添加到application.js时，指定的目录与my application.js目录不同

指令中的目录

app/assets/javascripts/application.js

。 我的目录

app/javascript/packs/application.js

。

---

我创建了说明中要求的目录，并将require语句放在那里。

除了将

jquery rails

和

bootstrap sass

gems添加到gem文件中，并将导入添加到

application.scss

文件中之外，您需要在

application.js

文件中包含jquery和bootstrap的javascripts。如果您清楚地完成了这些步骤，则在中也会提到这些步骤

application.js

//= require jquery
//= require bootstrap-sprockets

---

如果您使用的是sass，请确保删除在新rails项目中生成的默认

application.css

文件。

好的，因此在rails 6中，您会注意到使用了javascript文件夹app/javascript，这意味着您对JS所做的任何事情都应该从那里开始。现在，对宝石的依赖已降至最低，取而代之的是纱线

您缺少的是纱线安装

这是一个我喜欢使用的过程，我从我不久前在媒体上读到的东西中修改了它

# app/javascript/packs/application.js
import '../stylesheets/application'


# app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

然后

然后

并将其链接到app/javascript/packs/application.js文件中

# app/javascript/packs/application.js
import './bootstrap_custom.js'

然后

然后

---

如果您选择严格遵循此操作，请不要更改scss行等，否则会弄糟它

对不起，我忘记将其包含在我的问题中，但我已经这样做了。js文件的顺序相同吗？这可能是与turbolinks有关的问题，请查看从

application.js

中删除

/=require turbolinks

是否适用。如果它在删除后工作，那么您可能需要重新初始化下拉列表。是的，顺序相同。不。。。它仍然不起作用。非常感谢，它现在起作用了。我只有一个问题，我的导航栏现在居中了。然后当我点击它时，它会移到最右边。我拒绝了你的编辑。。。因为它是不正确的。。。应该使用pack_标签。您在评论中描述的问题听起来像是未关闭行的问题。。。检查你的密码再次感谢你。我只提供了编辑，因为当我使用pack_标签时，我的导航标题完全崩溃了。此外，我使用Rubymine，没有未关闭的标记；到#app/javascript/packs/application.js import'/bootstrap_custom.js'像这样#app/javascript/packs/application.js import'/bootstrap_custom.js'；

yarn add bootstrap@4.3.1 jquery popper.js

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

# app/javascript/packs/bootstrap_custom.js
import 'bootstrap/js/dist/alert'
import 'bootstrap/js/dist/button'
import 'bootstrap/js/dist/carousel'
import 'bootstrap/js/dist/collapse'
import 'bootstrap/js/dist/dropdown'
import 'bootstrap/js/dist/index'
import 'bootstrap/js/dist/modal'
import 'bootstrap/js/dist/popover'
import 'bootstrap/js/dist/scrollspy'
import 'bootstrap/js/dist/tab'
import 'bootstrap/js/dist/toast'
import 'bootstrap/js/dist/tooltip'
import 'bootstrap/js/dist/util'

# app/javascript/packs/application.js
import './bootstrap_custom.js'

# app/javascript/stylesheets/application.scss
@import './bootstrap_custom.scss'

# app/javascript/stylesheets/bootstrap_custom.scss
@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/_mixins.scss';
@import '~bootstrap/scss/_root.scss';
@import '~bootstrap/scss/_reboot.scss';
@import '~bootstrap/scss/_type.scss';
@import '~bootstrap/scss/_alert.scss';
@import '~bootstrap/scss/_badge';
@import '~bootstrap/scss/_breadcrumb';
@import '~bootstrap/scss/_button-group';
@import '~bootstrap/scss/_buttons';
@import '~bootstrap/scss/_buttons.scss';
@import '~bootstrap/scss/_card.scss';
@import '~bootstrap/scss/_carousel.scss';
@import '~bootstrap/scss/_close.scss';
@import '~bootstrap/scss/_code.scss';
@import '~bootstrap/scss/_custom-forms.scss';
@import '~bootstrap/scss/_dropdown.scss';
@import '~bootstrap/scss/_forms.scss';
@import '~bootstrap/scss/_grid.scss';
@import '~bootstrap/scss/_images.scss';
@import '~bootstrap/scss/_input-group.scss';
@import '~bootstrap/scss/_jumbotron.scss';
@import '~bootstrap/scss/_list-group.scss';
@import '~bootstrap/scss/_media.scss';
@import '~bootstrap/scss/_modal.scss';
@import '~bootstrap/scss/_nav.scss';
@import '~bootstrap/scss/_navbar.scss';
@import '~bootstrap/scss/_pagination.scss';
@import '~bootstrap/scss/_popover.scss';
@import '~bootstrap/scss/_print.scss';
@import '~bootstrap/scss/_progress.scss';
@import '~bootstrap/scss/_spinners.scss';
@import '~bootstrap/scss/_tables.scss';
@import '~bootstrap/scss/_toasts.scss';
@import '~bootstrap/scss/_tooltip.scss';
@import '~bootstrap/scss/_transitions.scss';
@import '~bootstrap/scss/_utilities.scss';