Niezdefiniowana mieszanka z Burbonem i Neat klejnotami

Question

Używam klejnotów bourbon i czystych do stworzenia projektu aplikacji szyn. Moja application.css.scss zawiera to:

@import "bourbon"; 
@import "neat"; 
@import "main"; 

Ale jeśli uruchomię 'aktywa Zgrabiarka: precompile' wtedy dzieje ten błąd:

rake aborted! 
Undefined mixin 'outer-container'. 
(in /Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss) 
/Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss:5:in `outer-container' 
/Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss:5 

Plik ten zawiera main.css.scss:

footer#page_footer { 
@include outer-container; 
nav{ 
    @include span-columns(6); 
    @include shift(3); 
    section#about_me_footer, section#contact_footer, section#miscellaneous_footer { 
    @include span-columns(2 of 6); 
} 
} 
p { 
@include span-columns(6); 
@include shift(3); 
} 
} 

Ktoś może dać mi jakieś sugestie?

Answer 1

Miałem ten sam problem. Udało mi się go uruchomić na dwa różne sposoby.

Pierwszym sposobem jest prawdopodobnie mniej pożądane, ale można dodać kod prawo w pliku application.css.scss:

div.container { 
    @include outer-container; 
} 

Alternatywnie, można dodać:

@import "bourbon"; 
@import "neat"; 

Do góry pliku main.css.scss.
Umożliwia to uporządkowanie stylów.

Linki site bourbon do strony w swojej wiki dotyczących tego problemu, ale rozwiązanie wspomniano nie działa dla mnie:

https://github.com/thoughtbot/bourbon/wiki/Rails-Help-%5C-Undefined-mixin

Answer 2

FWIW to kwestia zgłaszane https://github.com/thoughtbot/bourbon/issues/120, używając komentarz Jacklin chodzi o dodanie instrukcji importu bezpośrednio do mojego głównego pliku css rozwiązało ten problem. Jednak chciałbym rozwiązać ten problem, ponieważ naprawdę nie chcę dodawać tych instrukcji importu do każdego pliku, w którym chcę używać miksów do

Answer 3

Miałem ten sam problem.

Posiadałem element div używający zewnętrznego kontenera @include i drugiego elementu div zawierającego kolumny kolumnowe (8). Drugi div niepoprawnie usiadł na zewnątrz pierwszego, powodując błąd "Undefined mixin 'outer-container" ". Przeniesienie drugiego elementu div wewnątrz pierwszego (w zewnętrznym kontenerze - w CSS i HTML) rozwiązało problem.

W przypadku powyższego problemu należy zrobić to samo, upewniając się, że znacznik p jest dzieckiem stopki.

Answer 4

Miałem ten sam problem. Rozwiązaniem dla mnie była zmiana nazwy częściowego pliku z layout.css.scss na _layout.css.scss. Wszystkie pliki korzystające z miksów SASS muszą być uwzględnione po załadowaniu tych mixinów. W tym przypadku próbował on wstępnie skompilować plik layout.css sam, chociaż nie wymagał źródła odnośników. Dodanie znaku podkreślenia powoduje, że prekompilator ignoruje ten plik, dopóki inny plik go nie wymaga.

Answer 5

Zgodnie z Change Log mixin został usunięty z wersji 2.0.0. Najwyższą wersją, której można używać z outer-container jest 1.8.0. Dodając Neat przez Bundler, otrzymasz 2.0 lub więcej, chyba że określisz wersję w swoim Gemfile.

Aby to zrobić, wygląda na to, że jest o wiele prostszy, ale to niewielki komfort, jeśli masz kilka nieobsługiwanych wersji.