Having trouble with Twitter Bootstrap Rails CSS not loading after cloning a project onto a new machine

Two machines are in question here. Machine1 is working perfectly fine, while Machine2 is a new setup. The operating systems on the two machines are different - Machine1 runs OSX 10.6 Snow Leopard and Machine2 runs OSX 10.8 Mountain Lion. I have uploaded my project to Github, so the plan is to install Xcode, homebrew, git, rvm, ruby, rails on Machine2, clone the project, bundle install, run rake, and everything should be good to go, right?

Unfortunately, upon checking, it appears that the stylesheets are not loading correctly. There seems to be no CSS styling applied as indicated by the application.css file:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require bootstrap_and_overrides
 *= require_tree  
 *= require jquery.ui.datepicker
 *= require jquery.facebox
*/

Could there be something that I'm overlooking? I even went ahead and ran

rails generate bootstrap:install less
, but still no luck. It seems like the application.css file is not being interpreted for some reason.

I initially suspected that the Ruby version might be the issue since Machine2 was using Ruby 2.0 while Machine1 was running on Ruby 1.9.2. As an attempt to resolve this, I installed Ruby 1.9.2 on Machine2, but unfortunately, the problem persists.

All of this troubleshooting is happening in development mode. At one point, I tried including the bootstrap_and_overrides stylesheet in the layout and saw some styling changes, but clearly, that's not the solution.

Below are some key configurations:

Gemfile

source 'https://rubygems.org'

gem 'rails', '3.2.3'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'mysql2'


# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'twitter-bootstrap-rails'
  gem 'less-rails'
  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  gem 'therubyracer', :platform => :ruby
  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

development.rb

Experts::Application.configure do

  config.cache_classes = false

  config.whiny_nils = true

  config.consider_all_requests_local       = true
  config.action_controller.perform_caching = false

  config.action_mailer.raise_delivery_errors = false

  config.active_support.deprecation = :log

  config.action_dispatch.best_standards_support = :builtin

  config.active_record.mass_assignment_sanitizer = :strict

  config.active_record.auto_explain_threshold_in_seconds = 0.5

  config.assets.compress = false

  config.assets.debug = true
end

Answer №1

Perhaps the solution lies in downgrading the less-rails version. I encountered this issue when upgrading from ruby 1.9.3 to 2.0.0-p247, with all gems being updated. Production precompilation was not possible until I reverted back to less-rails version 2.3.3.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing Your Cytoscape Graph Node with an HTML Label

Currently, I am utilizing cytoscape.js to visually represent relationships between nodes. Specifically, I am trying to generate unique and stylish labels for a single node. My goal is to create more sophisticated label styles than those demonstrated in the ...

What causes certain divs to protrude when the parent div has overflow:hidden property enabled?

Issue: I am facing difficulty aligning all elements within one div without any overflow issues. Even with the parent div set to overflow:hidden, some child divs are protruding out of the container. How can I resolve this problem? Example: http://jsfiddle. ...

Utilizing Bootstrap's hidden command to pinpoint specific titles

Here is the code I have that generates previous and next links for my Wordpress post. I am looking to hide the title of these links and instead display 'back' and 'next' as the text. The current code successfully hides the icon display ...

Learn how to dynamically assign a new ID and name to a cloned div element using jQuery based on the original element's ID

Within a DIV, there are two Input Textboxes present. I am attempting to duplicate the above div, meaning I want two additional textboxes cloned from the original ones. However, I am encountering challenges when it comes to assigning new IDs and Names to ...

Transferring Data between Rails and Angularjs using JSON

Utilizing Angularjs to fetch JSON data from a Rails test app deployed on Heroku is proving to be a bit challenging. Below you can find the snippets of my Angular and Rails code. An error message displayed in my Firebug console reads: "NetworkError: 404 N ...

Identify when a particular CSS animation for an element reaches completion

Within our Javascript implementation, we incorporate two CSS animation keyframes that enable the element to be displayed or hidden: The first keyframe conceals the element as it is animated from top to bottom: upperGuideText.classList.add("upperGuideAnim ...

Tips for personalizing the appearance of active bootstrap tabs?

I am currently working on creating a website where Bootstrap tabs will display content according to their unique ID when selected. However, I have encountered an issue where the tab selected does not remain active. I am thinking of creating a custom active ...

Creating a layout with two divs displayed next to each other using CSS

Just when I thought I had it figured out, my two side-by-side divs are not behaving as intended inside the parent div. Why is the orange "Content" div ending up below the navigation bar? Can anyone spot what I did wrong here? Thank you in advance! CSS: ...

"Big Cartel - Effortless File Upload and Geolocation with JQuery

Check out my site here: I've been experimenting with images on my product pages and even created a test page. I have a few questions that I can't seem to figure out: Where should I host a jquery file? Do I need to include the jquery src for b ...

Can content be easily added to the header section of numerous HTML files simultaneously, eliminating the need to access each file individually?

I'm facing a challenge where I have to include a stylesheet in numerous HTML files. It seems like such a tedious task to do it manually for each file. Are there any tools or solutions available that can assist me with this process? Or perhaps there ar ...

A guide to the bottom border of text inputs in React Native

Trying to create a borderless text input has been a challenge for me. After applying the necessary properties, a bottom border line in black color appeared. View image of text input I am looking for a way to remove this border completely. import { TextIn ...

The initial item on the list, displayed on the right side in Google Chrome

Currently experiencing an issue with Google Chrome where the first list item's bullet is floating right while all other list items' bullets are aligned correctly at left. Here is the code snippet causing the problem: <div class="window_sub_ ...

Prioritizing the Loading of CSS Over Javascript

I have created a custom navbar/menu. Currently, it is loading CSS from my style.css and the JS is included in the PHP file using the following setup: <link rel="stylesheet" href="style.css" type="text/css"> <nav> ... </nav> <script& ...

Issue with Materialize CSS 'select' not functioning correctly when integrated with Django framework

I am working with a template that gathers all the names of authors from the author_info model. These names are displayed in a dropdown list. However, when I pass the selected value to the view, it ends up displaying null. Here is the template code: <se ...

Issue with the bootstrap toggle menu script not functioning as expected

My toggler menu is not working and I'm not sure why. I'd also like to know which links to remove and how to improve my website's speed. When I resize the browser window, the toggle menu icon is not displayed correctly and does not open a new ...

Ensure that the left div spans 100% of the width of the container, while the right div remains on the right side and maintains a

Is there a way to create an effect with a div where the left side is 100% and the right side stays fixed? <!DOCTYPE html> <html> <style> .left { width: 100%; float: left; border: #ccc solid 1px; } .right { width: 50px; float:left; border ...

Creating a scrolling effect similar to the Nest Thermostat

After researching countless references, I am determined to achieve a scrolling effect similar to the Nest Thermostat. I came across this solution on this JSFiddle, but unfortunately, the parent element has a fixed position that cannot be utilized within my ...

Expand the spectrum of the input range

Is there a way to make the cursor and bar of a range input bigger without changing their length? <input id="speed" type="range" min="10" max="80" /> Any suggestions on how to achieve this? Appreciate your assistance. ...

Using jQuery to create a fixed wrap element

I have a fixed wrap div on my page that I want to reposition after scrolling. My attempt using jQuery resulted in the div being too high and overlapping the footer. img1 img2 Snippet from my code: Below is the revised code snippet: var elementPosit ...

CSS animation keyframes failing to initialize

How can I fix my CSS @keyframe animation that is not starting as expected? http://jsfiddle.net/sadmicrowave/VKzXp/ @-webkit-keyframes slideNotificationsHide { 0%{ width:70%; } 100%{ width:94%; left:0; right:0; } } #left-container{ position:abosl ...