Question

我正在使用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;
}

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

我已经尝试清除我的饼干和历史，这是一个戏剧性的步骤，而且没有快乐。

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

我已删除 // = require rails_ujs ，因为它是多余的 // = require jquery_ujs

任何建议表示赞赏。

Answer 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才能使图标字体生效。

在app / assets / javascripts / application.js中要求Bootstrap Javascripts：

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

Answer 2

如果您使用//= require rails-ujs，请从application.js移除您不需要此内容的//= require jquery_ujs，请参阅此jquery-rails。

喜欢这个

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

Answer 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。

我无法确定某些建议的更改最终没有帮助，所以感谢所有建议更改的人！很高兴能过去这个头痛。

Ruby on Rails Bootstrap下拉列表在开发中工作，但不是Heroku

3 个答案: