2012-12-14 20 views
8

Tôi đang sử dụng bourbongọn gàng đá quý để tạo thiết kế ứng dụng đường ray. application.css.scss My chứa này:Hỗn hợp không xác định với đá quý Bourbon và Neat

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

Nhưng nếu tôi chạy 'tài sản cào: precompile' sau đó xảy ra lỗi này:

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 

Các main.css.scss tập tin chứa này:

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); 
} 
} 

Ai đó có thể cho tôi một số đề xuất?

Trả lời

7

Tôi đã gặp sự cố tương tự. Tôi đã có thể làm cho nó hoạt động theo hai cách khác nhau.

Cách đầu tiên có lẽ là kém hấp dẫn nhưng bạn có thể thêm mã của bạn ngay trong file application.css.scss:

div.container { 
    @include outer-container; 
} 

Ngoài ra, bạn có thể thêm:

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

Đầu trang của tệp main.css.scss của bạn.
Điều này cho phép bạn giữ phong cách của mình được sắp xếp.

Các liên kết trang web của bourbon đến một trang trong wiki của họ về vấn đề này, nhưng các giải pháp nêu không làm việc cho tôi:

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

0

FWIW đây là vấn đề báo cáo https://github.com/thoughtbot/bourbon/issues/120, Sử dụng comment jacklin về thêm các câu lệnh nhập khẩu trực tiếp vào tệp css chính của tôi đã giải quyết nó. Tuy nhiên, tôi muốn có vấn đề này cố định kể từ khi tôi không thực sự muốn tiếp tục thêm những báo cáo nhập khẩu cho mỗi tập tin tôi muốn sử dụng mixins cho

0

Tôi đã có cùng một vấn đề.

Tôi đã có div sử dụng @include outer-container và div thứ hai chứa @include span-columns (8). Div thứ hai không chính xác ngồi bên ngoài đầu tiên, tạo ra lỗi gây hiểu lầm "Undefined mixin 'outer-container'". Di chuyển div thứ hai bên trong đầu tiên (bên trong thùng chứa bên ngoài - trong CSS và HTML) đã khắc phục sự cố.

Đối với vấn đề trên, bạn phải làm điều tương tự bằng cách đảm bảo thẻ p là con của chân trang.

4

Tôi gặp vấn đề tương tự. Giải pháp cho tôi là đổi tên một phần tệp từ layout.css.scss thành _layout.css.scss. Bất kỳ tập tin nào sử dụng các mixin SASS cần phải được bao gồm sau khi các mixin này được nạp vào. Trong trường hợp này, nó đã cố gắng biên dịch trước tệp layout.css một mình, mặc dù nó không yêu cầu nguồn của các mixin mà nó tham chiếu. Việc thêm dấu gạch dưới làm cho trình biên dịch trước bỏ qua tệp đó cho đến khi một tệp khác yêu cầu nó.

0

Theo số Change Log bản mix outer-container đã bị xóa kể từ phiên bản 2.0.0. Phiên bản cao nhất bạn có thể sử dụng với outer-container là 1.8.0. Khi thêm Neat qua Bundler, bạn sẽ nhận được 2.0 hoặc cao hơn trừ khi bạn chỉ định một phiên bản trong Gemfile của bạn.

new way để làm điều này có vẻ đơn giản hơn nhiều, nhưng đó là chút thoải mái nếu bạn có một loạt các scss không được hỗ trợ.