3

My application.js:

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

My 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'

If I I just leave my app like that, all my jQuery will work fine. But I also need

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

on my application.html.erb since I am using Bootstrap 4.

So with this configuration, I am experiencing lot of issues with my jQuery, like

$(...).flatpickr is not a function

Is there a way to avoid those conflicts? I suppose that's because I'm including multiple jQueries on my app.

If I remove //= require jquery all the Bootstrap-related jQuery will work, but my custom scripts won't.
If I remove <script src="https://code.jquery.com/jquery-3.3.1.min.js"</script> my scripts will work but all Bootstrap-related won't (like the hamburger navbar or similars).

4

1 回答 1

3

以下是将引导程序 4 添加到您的 rails 5 应用程序的步骤这里是ruby​​gems和github页面的链接。

第 1 步：将 bootstrap 和 jquery-rails 添加到您的 Gemfile（确保 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 依赖项

注意：重要的是要注意，您需要使用//= 要求 jquery3

于 2019-02-10T15:08:47.170 回答