Rails 5 Foundation 6未加载css答案

【问题标题】：Rails 5 Foundation 6 not loading cssRails 5 Foundation 6未加载css
【发布时间】：2017-04-20 05:23:08
【问题描述】：

我无法让基础 + 导轨正常工作。我已经毫无问题地安装了基础 gem，当我创建带有基础内容的简单页面时，它无法加载样式表。

例子：

<!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 版本：5.0.2

基础：6.3.1.0

任何想法如何让它工作？

【问题讨论】：

我会在这里看看这个，听起来您遇到了资产管道问题。确保将其正确导入到 application.css 文件中。 github.com/zurb/foundation-rails#foundationrails
感谢您的回答。我认为它的导入正确。在 application.css 中我发现需要声明。 '/*= 需要foundation_and_overrides'

标签： css ruby-on-rails zurb-foundation

【解决方案1】：

停止服务器，运行rails g foundation:install，然后重新启动

【讨论】：

我在安装过程中这样做了。

【解决方案2】：

我在使用 rails 5 和foundation 6 时遇到了这个问题。自从上次使用 rails 已经有一段时间了，我有点生疏了。我花了好几个小时挠头并在网上搜索。

我使用 rvm 将所有 gem 分开，因此决定查看我的 gemset，发现我安装了两个版本的 gem：

foundation-rails-5.4.5.0/ 和 foundation-rails-6.4.1.3/

删除版本5.4.5.0 后，我再次运行rails g foundation:install 命令，这解决了问题。

我假设我使用旧版本运行安装程序，它会生成与新版本完全不同的 foundation_and_overrides.scss 文件。

这是新版本的样子：

@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;

旧版本在很大程度上注释掉了变量声明，只包含了两个未注释的导入：

@import 'foundation/functions' //which gave a file not found error
@import 'foundation'

希望这将有助于其他人在这种情况下。

【讨论】：