Rails 5 Foundation 6 not loading css
Question
I cannot get foundation + rails working. I've installed foundation gem without problems and when I create simple page with foundation content it can't load stylesheets.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">
<a href="#">Right Button Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
<li class="active"><a href="#">Active link in dropdown</a></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><a href="#">Left Nav Button</a></li>
</ul>
</section>
</nav>
<%= yield %>
</body>
Rails version: 5.0.2
Foundation: 6.3.1.0
Any ideas how to get this working ?
2 answers
solution1
0 2017-04-20 09:19:45
停止服务器，运行rails g foundation:install ，然后重新启动它
solution2
0 2017-12-08 10:36:30
I had this issue working with rails 5 and foundation 6. It had been a while since last using rails and I was a bit rusty. I had spent a good couple of hours scratching my head and searching the net.
I use rvm to keep all of my gems seperate so decided to take a look in my gemset and found that I had two versions of the gem installed:
foundation-rails-5.4.5.0/ and foundation-rails-6.4.1.3/
After removing version 5.4.5.0 I ran the rails g foundation:install command again, this fixed the issue.
I assume I ran the installer using the older version which generates a completely different foundation_and_overrides.scss file to the new version.
this is what the new version looks like:
@charset 'utf-8';
@import 'settings';
@import 'foundation';
// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
//
// @import 'motion-ui/motion-ui';
// We include everything by default. To slim your CSS, remove components you don't use.
@include foundation-global-styles;
@include foundation-xy-grid-classes;
//@include foundation-grid;
//@include foundation-flex-grid;
@include foundation-flex-classes;
@include foundation-typography;
@include foundation-forms;
@include foundation-button;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-card;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
@include foundation-float-classes;
// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
//
// @include motion-ui-transitions;
// @include motion-ui-animations;
The older version was largely commented out variable declarations and only inlcluded two uncommented imports:
@import 'foundation/functions' //which gave a file not found error
@import 'foundation'
Hopefully this will help others in this situation.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.