4

I am building a basic RoR application right now, but in both my development and production environments, I am unable to make customizations to the boostrap css, and the javascript isn't loading (it is however for my JW Player on the homepage). For instance, the dropdown function isn't working for the navbar, and the "Destroy" function isn't working when I try to delete files.

Here is my Gemfile:

    source 'https://rubygems.org'
    ruby '2.0.0'

    # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
    gem 'rails', '4.0.2'

    # Use SCSS for stylesheets
    gem 'sass-rails', '~> 4.0.0'

    # Use Uglifier as compressor for JavaScript assets
    gem 'uglifier', '>= 1.3.0'

    # Use CoffeeScript for .js.coffee assets and views
    gem 'coffee-rails', '~> 4.0.0'

    # See https://github.com/sstephenson/execjs#readme for more supported runtimes
    # gem 'therubyracer', platforms: :ruby

    # Use jquery as the JavaScript library
    gem 'jquery-rails'

    # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
    gem 'turbolinks'

    # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
    gem 'jbuilder', '~> 1.2'

    gem 'bootstrap-sass'

    gem 'devise', '~> 3.1.0.rc2'

    gem 'rake', '~> 10.3.2'

    gem 'jwplayer-rails', '~> 1.0.1'

    group :development, :test do
        gem 'sqlite3'
    end

    group :production do
        gem 'pg'
        gem 'rails_12factor'
    end

    group :doc do
      # bundle exec rake doc:rails generates the API under doc/api.
      gem 'sdoc', require: false
    end

    # Use ActiveModel has_secure_password
    # gem 'bcrypt-ruby', '~> 3.1.2'

    # Use unicorn as the app server
    # gem 'unicorn'

    # Use Capistrano for deployment
    # gem 'capistrano', group: :development

    # Use debugger
    # gem 'debugger', group: [:development, :test]

*/-------------------------------------------------*/

Application.js:

//= require jwplayer.shuffle
//= require jwplayer.shuffle.min
//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

*/-------------------------------------------------*/

Application.css:

 *= require_tree .
 *= require_self
 */

*/-------------------------------------------------*/

I placed these css customizations in an scss file, which are not being recognized: 

@import "bootstrap";

$body-bg:                      #ecf0f1;
$font-family-sans-serif:       'Lato', sans-serif;
$navbar-height:                110px;                        
$navbar-margin-bottom:         0px;
$navbar-default-bg:            black;
$navbar-default-brand-color:   #ffffff;
$brand-primary:                #ff00ff;
$link-hover-color:             #00ffff;

*/-------------------------------------------------*/

Application.html.rb file: 

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>

Development.rb file: 

Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.

  # In the development environment your application's code is reloaded on
  # every request. This slows down response time but is perfect for development
  # since you don't have to restart the web server when you make code changes.
  config.cache_classes = false

  # Do not eager load code on boot.
  config.eager_load = false

  # Show full error reports and disable caching.
  config.consider_all_requests_local       = true
  config.action_controller.perform_caching = false

  # Don't care if the mailer can't send.
  config.action_mailer.raise_delivery_errors = false

  # Print deprecation notices to the Rails logger.
  config.active_support.deprecation = :log

  # Raise an error on page load if there are pending migrations.
  config.active_record.migration_error = :page_load

  # Debug mode disables concatenation and preprocessing of assets.
  # This option may cause significant delays in view rendering with a large
  # number of complex assets.
  config.assets.debug = true

  # Adds additional error checking when serving assets at runtime.
  # Checks for improperly declared sprockets dependencies.
  # Raises helpful error messages.
  config.assets.raise_runtime_errors = true

  # Raises error for missing translations
  # config.action_view.raise_on_missing_translations = true
end

*/-------------------------------------------------*/

Production.rb: 

Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.

  # Code is not reloaded between requests.
  config.cache_classes = true

  # Eager load code on boot. This eager loads most of Rails and
  # your application in memory, allowing both threaded web servers
  # and those relying on copy on write to perform better.
  # Rake tasks automatically ignore this option for performance.
  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  # Enable Rack::Cache to put a simple HTTP cache in front of your application
  # Add `rack-cache` to your Gemfile before enabling this.
  # For large-scale production use, consider using a caching reverse proxy like nginx, varnish or squid.
  # config.action_dispatch.rack_cache = true

  # Disable Rails's static asset server (Apache or nginx will already do this).
  config.serve_static_assets = false

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

  # Generate digests for assets URLs.
  config.assets.digest = true

  # `config.assets.precompile` has moved to config/initializers/assets.rb

  # Specifies the header that your server uses for sending files.
  # config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
  # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  # config.force_ssl = true

  # Set to :debug to see everything in the log.
  config.log_level = :info

  # Prepend all log lines with the following tags.
  # config.log_tags = [ :subdomain, :uuid ]

  # Use a different logger for distributed setups.
  # config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)

  # Use a different cache store in production.
  # config.cache_store = :mem_cache_store

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
  # config.action_controller.asset_host = "http://assets.example.com"

  # Precompile additional assets.
  # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
  # config.assets.precompile += %w( search.js )

  # Ignore bad email addresses and do not raise email delivery errors.
  # Set this to true and configure the email server for immediate delivery to raise     delivery errors.
  # config.action_mailer.raise_delivery_errors = false

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation cannot be found).
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify

  # Disable automatic flushing of the log to improve performance.
  # config.autoflush_log = false

  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new

  # Do not dump schema after migrations.
  config.active_record.dump_schema_after_migration = false
end

*/-------------------------------------------------*/

Can anyone provide assistance with this problem? I would greatly appreciate it. As I mentioned in the header, I am running ruby 1.9.3 and rails 4.1.4.

1 Answer 1

2

I think this is entirely an issue of ordering.

In your application.js, you should be requiring bootstrap after requiring jquery.

In your scss file, you should be doing @import "bootstrap"; after setting your variables.

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, I am am idiot. However, while those tweaks corrected the errors in my development environment, I am still experiencing them in production. I made sure I ran git add . and committed all the changes before pushing to Heroku. I also tried clobbering my cache and restarting the server, to no avail. Does this have to do with my production.rb configuration?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.