Rails4 Foundation4未定義mixin

Question

我不能在我的Rails應用程序中使用Foundation的mixins（錯誤：未定義的mixin'列'）。

的Gemfile

gem 'rails', '~> 4.0.0' 
    gem 'sass-rails' 
    gem 'zurb-foundation' 

Application.css.scss

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

layout.css.scss

section { 
     @include column(12); 
    } 

    aside { 
     @include column(4); 
    } 

還有沒有找到的混入。 我也看過https://github.com/zurb/foundation/issues/1230 和https://github.com/zurb/foundation/issues/2128但他們都沒有工作。

Answer 1

我有同樣的問題時，我想在我的stories.css.scss 使用混合我不得不刪除requires和手動導入我的SCSS文件。

#application.css.scss 
@import "foundation_and_overrides"; 
@import "stories"; 

源：https://github.com/zurb/foundation/issues/2128#issuecomment-17912556

另外我以下錯誤消息

Syntax error: File to import not found or unreadable: foundation/foundation-global. 

我不得不在foundation_and_overrides.css.scss改變下面的行

#foundation_and_overrides.css.scss 
@import "foundation/foundation-global"; 

到

#foundation_and_overrides.css.scss 
@import "foundation/variables"; 

來源：https://github.com/zurb/foundation/issues/1792#issuecomment-17041016

我希望幫助。我花了一些時間纔得到這個工作。

Answer 2

我遇到同樣的問題...這裏是我的app.scss ...一切正常，但我不能使用基礎mixin我正在用compass觀看文件。

// Global Foundation Settings 
@import "settings"; 

// Comment out this import if you don't want to use normalize 
@import "normalize"; 

// Comment out this import if you are customizing you imports below 
@import "foundation"; 
@import "compass"; 
@import "compass/css3"; 

@import "foundation/variables"; 

// Import specific parts of Foundation by commenting the import "foundation" 
// and uncommenting what you want below. You must uncomment the following if customizing 

@import "foundation/components/global"; // *always required 
@import "foundation/components/grid"; 

// 
// Use this grid if you want to start using the new Foundation 5 grid early. 
// It will change breakpoints to min-width: 640px and 1024px. 
// 
@import "foundation/components/grid-5"; 
// 

@import "foundation/components/visibility"; 
@import "foundation/components/block-grid"; 
@import "foundation/components/type"; 
@import "foundation/components/buttons"; 
@import "foundation/components/forms"; // *requires components/buttons 
@import "foundation/components/custom-forms"; // *requires components/buttons, components/forms 
@import "foundation/components/button-groups"; // *requires components/buttons 
@import "foundation/components/dropdown-buttons"; // *requires components/buttons 
@import "foundation/components/split-buttons"; // *requires components/buttons 
@import "foundation/components/flex-video"; 
@import "foundation/components/section"; 
@import "foundation/components/top-bar"; // *requires components/grid 
@import "foundation/components/orbit"; 
@import "foundation/components/reveal"; 
@import "foundation/components/joyride"; 
@import "foundation/components/clearing"; 
@import "foundation/components/alert-boxes"; 
@import "foundation/components/breadcrumbs"; 
@import "foundation/components/keystrokes"; 
@import "foundation/components/labels"; 
@import "foundation/components/inline-lists"; 
@import "foundation/components/pagination"; 
@import "foundation/components/panels"; 
@import "foundation/components/pricing-tables"; 
@import "foundation/components/progress-bars"; 
@import "foundation/components/side-nav"; 
@import "foundation/components/sub-nav"; 
@import "foundation/components/switch"; 
@import "foundation/components/magellan"; 
@import "foundation/components/tables"; 
@import "foundation/components/thumbs"; 
@import "foundation/components/tooltips"; 
@import "foundation/components/dropdown"; 


@media only screen and (min-width: $small-screen) { 

    nav.top-bar > section > ul > li.has-dropdown{ 
     position: static; 
     & > .dropdown{ 
      @include outerRow(); 

      & > li.has-dropdown{ 
       @include column(3); 
       min-width: auto; 

       .dropdown{ 

        position: static; 
        visibility: inherit; 
        top: auto !important; 
        left: auto !important; 
        padding: 0; 
        min-width: auto; 
        li{ 
         @include column(12); 
         min-width: auto; 
        } 
       } 
      } 
     } 
    } 
}