Question

我的application.js：

//= require rails-ujs
//= require jquery
//= require activestorage
//= require turbolinks
//= require bootstrap-sprockets
//= require flatpickr.min
//= require_tree .

我的Gemfile：

gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'bootstrap-sass'
gem 'jquery-rails'

如果我我只是这样离开我的应用程序，我所有的jQuery都可以正常工作。但我还需要

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"</script>
</head>

在我的application.html.erb上，因为我正在使用Bootstrap 4。

因此，通过这种配置，我的jQuery遇到了很多问题，例如

$（...）。flatpickr不是函数

是否有避免这些冲突的方法？我想那是因为我在我的应用程序中包含了多个 jQueries 。

如果我删除//= require jquery，所有与Bootstrap相关的jQuery都可以使用，但是我的自定义脚本将无法使用。
如果删除<script src="https://code.jquery.com/jquery-3.3.1.min.js"</script>，我的脚本将可以运行，但所有与Bootstrap相关的脚本都将无法运行（如汉堡导航栏或类似文件）。

Answer 1

以下是将bootstrap 4添加到rails 5应用程序的步骤，这里是指向rubygems和github页面的链接。

第1步：在您的Gemfile中添加bootstrap和jquery-rails（确保sprockets-rails至少为v2.3.2）

gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'

第2步：将Bootstrap依赖项和Bootstrap添加到您的application.js

//= require jquery3
//= require popper
//= require bootstrap

您无需在视图上指定jquery的cdn，这是该行的功能// = require jquery3。并删除您对bootstrap 3

的bootstrap-sass依赖性

注意：请注意，您需要使用带有 // = require jquery3

的jquery3，这一点很重要

on Rails的jQuery的冲突

1 个答案: