Rails 5 Foundation 6未加载css

我无法获得基础+导轨工作。我已经安装了基础gem，没有问题，当我创建基础内容的简单页面时，它无法加载样式表。Rails 5 Foundation 6未加载css

例子：

<!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

任何想法如何得到这个工作？

来源

2017-04-20 exegee

我想在这里看看，这听起来像是你有一个资产管道问题。确保你正确地将它导入到application.css文件中。 https://github.com/zurb/foundation-rails#foundationrails –

感谢您的回答。我认为它的导入正确。在application.css中我找到了require声明。 '/ * = require foundation_and_overrides' – exegee

停止服务器，运行rails g foundation:install，并再次启动

来源

2017-04-20 09:19:45 dgrijuela

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

我曾就此问题与导轨5和6的基础工作这已经有一段时间，因为上次使用的轨道，我是有点生疏。我花了好几个小时挠挠头，寻找网络。

我用RVM让我所有的宝石单独所以决定把我的宝石一看，发现我有宝石的安装了两种版本：

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;

旧版本主要是注释掉的变量声明，只有inlcluded 2个注释掉进口：

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

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

来源

2017-12-08 10:36:30 DazBaldwin

Rails 5 Foundation 6未加载css

回答

相关问题