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

回答

相關問題