0

I am using Ruby 2.4.1 / Rails 5.1.6

I have dropdown menus in my Bootstrap navigation bar. I finally got them to work in my development environment, but they do not work when pushed to Heroku. Here is my application.js file:

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

I have read from other Stackoverflow posts that some folks have luck when they reorder this list. However, doing so breaks things in development, which is no good.

Here is my 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;
}

I also read answers where precompiling assets fixed the issue, however, this did not fix it for me (it might've been one of the things that helped getting it working in my development environment though).

I've tried clearing my cookies and history as a dramatic step, and no joy.

I've tried adding @imports to application.scss directly instead of in custom.css.scss.

I've removed //= require rails_ujs, since it is redundant with //= require jquery_ujs

Any suggestions appreciated.

S. Harper
  • 167
  • 9

3 Answers3

1

Apparently you are missing some things

In your Gemfile you need to add

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

bundle install and restart your server

Import Bootstrap styles in app/assets/stylesheets/application.scss:

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

bootstrap-sprockets must be imported before bootstrap for the icon fonts to work.

Require Bootstrap Javascripts in app/assets/javascripts/application.js:

//= require jquery
//= require bootstrap-sprockets
Andres23Ramirez
  • 647
  • 1
  • 4
  • 14
  • Thanks for the quick reply! I updated the question with the related files. Unfortunately, I appear to have everything here, and it still is misbehaving on Heroku. Only thing different from your suggestion is I have **gem 'sass-rails', '~> 5.0'**. This should be fine, right? – S. Harper May 18 '18 at 19:32
  • Tried using your suggested version of the gem just in case. Didn't fix things, but worth a shot. – S. Harper May 18 '18 at 19:36
1

Remove the //= require rails-ujs from application.js you don't need this if you use //= require jquery_ujs, see this jquery-rails.

Like this

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
fool-dev
  • 7,671
  • 9
  • 40
  • 54
  • Thanks for the quick reply! Unfortunately, this doesn't solve the issue. Glad to have learned something though. – S. Harper May 18 '18 at 19:26
0

I found the answer in this older SO post: How to reset Heroku Rails4 asset pipeline cache. I was trying to precompile assets directly on Heroku using heroku run --app NAMEOFAPP rake assets:precompile, instead of precompiling using rake assets:precompile RAILS_ENV=production and then committing the resulting assets to GitHub.

I can't be sure some of the suggested changes didn't help in the end, so thank you to everyone who suggested changes! Very glad to be past this headache.

S. Harper
  • 167
  • 9