Menu icon Foundation
Rails 4 Foundation 5.4.3.0 Not Working At All

Hi Guys,

I've recently upgraded my rails application form 3.2.12 to 4.1.5. For some reason none of the Foundation styles seem to be working. My custom css at the bottom of the foundation_and_overrides.scss seem to load and work but nothing for Foundation works. I even created a new rails 4 app from scratch, added the rails-foundation gem and ran rails g foundation:install. Even with this new app, nothing works. See below my code:

Screen shot 2014 09 06 at 18.14.15

Gem file:

gem 'rails', '4.1.5'
gem 'sass-rails',   '4.0.0.rc1'
gem 'uglifier', '1.3.0'
gem 'coffee-rails', '4.0.0'
gem 'jquery-ui-rails'
gem 'foundation-rails'

Application.html.erb:

<!DOCTYPE html>
<html lang="en">
  <head>
    <%= render 'layouts/metatags' %>
    <title><%= content_for?(:title) ? yield(:title) : "Title" %></title>
    <%= stylesheet_link_tag "application" %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <%= yield %>
    <%= javascript_include_tag "application" %>      
    <%= render 'layouts/footer' %>
  </body>
</html>

Application.css:

/*
 *= require_self
 *= require foundation_and_overrides
 
 *= require_tree .
*/

Application.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require foundation
//= require_tree .

$(function(){ $(document).foundation(); });

foundation_and_overrides.scss

All the usual foundation settings, at the bottom

@import 'foundation';

            

         

railsFoundationimportcssrubynotworkinghelp

Hi Guys,

I've recently upgraded my rails application form 3.2.12 to 4.1.5. For some reason none of the Foundation styles seem to be working. My custom css at the bottom of the foundation_and_overrides.scss seem to load and work but nothing for Foundation works. I even created a new rails 4 app from scratch, added the rails-foundation gem and ran rails g foundation:install. Even with this new app, nothing works. See below my code:

Screen shot 2014 09 06 at 18.14.15

Gem file:

gem 'rails', '4.1.5'
gem 'sass-rails',   '4.0.0.rc1'
gem 'uglifier', '1.3.0'
gem 'coffee-rails', '4.0.0'
gem 'jquery-ui-rails'
gem 'foundation-rails'

Application.html.erb:

<!DOCTYPE html>
<html lang="en">
  <head>
    <%= render 'layouts/metatags' %>
    <title><%= content_for?(:title) ? yield(:title) : "Title" %></title>
    <%= stylesheet_link_tag "application" %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <%= yield %>
    <%= javascript_include_tag "application" %>      
    <%= render 'layouts/footer' %>
  </body>
</html>

Application.css:

/*
 *= require_self
 *= require foundation_and_overrides
 
 *= require_tree .
*/

Application.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require foundation
//= require_tree .

$(function(){ $(document).foundation(); });

foundation_and_overrides.scss

All the usual foundation settings, at the bottom

@import 'foundation';

            

         
forloop almost 5 years ago

If you are on Chrome, use the Chrome Dev Tool, go to "Console" and see which css file returns 404.

James Stone almost 5 years ago

This is likely the same issue I had with middleman (also uses sprockets asset pipeline + compass + sass). They are going to deploy a fix for this Monday, but if you need something earlier you can downgrade your compass + sass gems or specify specific versions as I did in bundler / gemfile. You can read my response here:

http://foundation.zurb.com/forum/posts/18856-sass-342-compilation-problem