Ruby on Rails Bootstrap 下拉菜单在开发中工作，而不是 Heroku答案

【问题标题】：Ruby on Rails Bootstrap dropdowns working in development, but not HerokuRuby on Rails Bootstrap 下拉菜单在开发中工作，而不是 Heroku
【发布时间】：2018-05-19 04:22:50
【问题描述】：

我正在使用 Ruby 2.4.1 / Rails 5.1.6

我的 Bootstrap 导航栏中有下拉菜单。我终于让它们在我的开发环境中工作，但是当它们被推送到 Heroku 时它们不起作用。这是我的 application.js 文件：

//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

我从其他 Stackoverflow 帖子中读到，有些人在重新排序此列表时很幸运。但是，这样做会破坏开发中的东西，这是不好的。

这是我的 Gemfile：

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end

gem 'bootstrap-sass', '~> 3.3.7'
gem 'jquery-rails'

gem 'rails', '~> 5.1.4'
gem 'puma', '~> 3.7'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'bcrypt', '~> 3.1.7'

group :development, :test do
  gem 'sqlite3'

  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :production do
  gem 'pg', '~> 0.18'
  gem 'rails_12factor'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

application.scss：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
@import "bootstrap-sprockets"; // suggested change from SO user.
@import "bootstrap"; // suggested change from SO user.

custom.css.scss：

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

.listing {
  list-style: none;
  padding-left: 0;
}

.username-link {
  padding-top: 10px;
}

我还阅读了预编译资产解决问题的答案，但是，这并没有为我解决问题（尽管它可能是帮助它在我的开发环境中工作的原因之一）。

我尝试清除我的 cookie 和历史记录作为一个戏剧性的步骤，但没有任何乐趣。

我尝试将@imports 直接添加到 application.scss 而不是 custom.css.scss。

我删除了 //= require rails_ujs，因为它与 //= require jquery_ujs

是多余的

任何建议表示赞赏。

【问题讨论】：

尝试从 application.js 中删除 rails-ujs
感谢您的回复！不幸的是，这并不能解决问题。

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

显然你错过了一些东西

您需要在 Gemfile 中添加

gem 'bootstrap-sass', '~> 3.3.7'
gem 'sass-rails', '>= 3.2'//This one you need
gem 'jquery-rails'

bundle install 并重启你的服务器

在 app/assets/stylesheets/application.scss 中导入 Bootstrap 样式：

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

bootstrap-sprockets 必须在 bootstrap 之前导入，图标字体才能工作。

在 app/assets/javascripts/application.js 中需要 Bootstrap Javascript：

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

【讨论】：

感谢您的快速回复！我用相关文件更新了问题。不幸的是，我似乎在这里拥有一切，但它在 Heroku 上仍然表现不佳。唯一与您的建议不同的是我有 gem 'sass-rails', '~> 5.0'。这应该没问题吧？
尝试使用建议的 gem 版本以防万一。没有解决问题，但值得一试。

【解决方案2】：

从application.js 中删除//= require rails-ujs，如果您使用//= require jquery_ujs，则不需要此，请参阅此jquery-rails。

这样

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

【讨论】：

感谢您的快速回复！不幸的是，这并不能解决问题。不过很高兴学到了一些东西。

【解决方案3】：

我在这个较早的 SO 帖子中找到了答案：How to reset Heroku Rails4 asset pipeline cache。我尝试使用 heroku run --app NAMEOFAPP rake assets:precompile 直接在 Heroku 上预编译资产，而不是使用 rake assets:precompile RAILS_ENV=production 预编译，然后将生成的资产提交到 GitHub。

我不能确定某些建议的更改最终没有帮助，所以感谢所有建议更改的人！很高兴能摆脱这种头痛。

【讨论】：