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

Question

我在 Ruby 我的 RoR 项目中使用 JQuery 时遇到问题。我是 Rails 上 Ruby 的新手，希望在我的项目中使用 bootstrap-sass。我遵循了 here 中的说明，这是 Github bootstrap 存储库。我正在使用 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>

当宽度低于大约 600px 时会生成一个导航栏按钮，但是，当我单击它时，它不会给我折叠列表。所以我假设问题出在 JQuery 支持上。

这些是我为 JQuery 支持导入的 gem。

gem 'jquery-rails'
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'

我的 application.scss 中的导入：

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

我的 application.js 的需求语句：

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

我已经重启了我的服务器好几次运行 bundle install。我也没有在运行服务器或单击按钮时出现任何错误。

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

指令中的目录app/assets/javascripts/application.js。我的目录 app/javascript/packs/application.js。我创建了说明中要求的目录，并将要求语句放在那里。

Answer 1

除了将 jquery-rails 和 bootstrap-sass gem 添加到 Gemfile 并将导入添加到 application.scss 文件之外，您还需要包含 jquery 和bootstrap 在 application.js 文件中。如果您清楚地完成这些步骤，docs 中也会提到这些步骤。

application.js

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

如果您正在使用 sass，请确保删除在新 rails 项目中生成的默认 application.css 文件。

Answer 2

好的，所以在 rails 6 中你会注意到 javascript 文件夹的使用 app/javascript 这意味着你对 JS 所做的任何事情都应该从那里完成。这些对 gems 的依赖现在最小并被 yarn 取代。

你缺少的是纱线安装。

这是我喜欢使用的过程，我根据前一段时间在媒体上阅读的内容进行了修改

# 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' %>

在控制台中运行

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'

并且 link 它在你的 app/javascript/packs/application.js 文件中。

# 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';

如果你选择跟随它，请精确地跟随它，不要更改 scss 行等，它会把它弄乱

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

How to import JavaScript into RoR project with Rubymine?

ruby

jquery

ruby-on-rails

bootstrap-sass