Rails tài sản: biên dịch trước hành vi kỳ lạ

Question

Tôi thấy mình ở phía trước của một hành vi kỳ lạ của nhiệm vụ assets:precompile, hoặc ít nhất ở phía trước của một cái gì đó tôi không hoàn toàn hiểu.

Vì vậy, tôi đang sử dụng Rails 3.1.3, Sprockets 2.0.3, Ít 2.0.11 cho ứng dụng web của tôi, cộng với tôi dựa vào Bootstrap cho bố cục, vì vậy tôi đang sử dụng cũng ít đường ray 2.1.8 trở xuống -rails-bootstrap 2.0.8. Tôi đã tùy chỉnh kiểu như họ nói here.

Cấu hình tài sản của tôi là:

stylesheets 
|--application.css.scss 
|--custom-style/ 
    |--variables.less 
    |--mixins.less 
    |--buttons.less 
|--custom-style.css.less 

Trong application.css.scss tôi làm

//=require custom-style 

Và trong tùy chỉnh phong cách tôi làm

@import "twitter/bootstrap/reset"; 
//@import "twitter/bootstrap/variables"; // Modify this for custom colors, font-sizes, etc 
@import "custom-style/variables"; 
//@import "twitter/bootstrap/mixins"; 
@import "custom-style/mixins"; 
// And all the other standar twitter/bootstrap imports... 

// Other custom-style files to import 
@import "custom-style/buttons" 
//... 

// And other rules here 
//... 

Cuối cùng trong buttons.less Tôi sử dụng một số biến và mixin được xác định trong variables.less và mixins.less B tệp ootstrap, @white và .buttonBackground để có thêm thông số kỹ thuật.

Nếu tôi khởi động bundle exec rake assets:precompile với cấu hình trên, nhiệm vụ thất bại và tôi nhận được lỗi này:

$ bundle exec rake assets:precompile 
/usr/local/rvm/rubies/ruby-1.9.3-p0/bin/ruby /usr/local/rvm/gems/ruby-1.9.3-p0/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets 
rake aborted! 
.buttonBackground is undefined 

Nhưng là nếu tôi làm thay đổi này

buttons.less --> buttons.css.less 

@import "buttons" --> @import "buttons.css.less" 

Tất cả mọi thứ hoạt động tốt !!

Có liên quan đến phạm vi của các biến và chức năng ít hơn khi làm việc với nhập lồng nhau không? Hoặc một cái gì đó đã làm với thứ tự phân tích cú pháp ít hơn, hoặc Sprockets, xử lý cây nhập khẩu?

Tôi có thiếu gì đó hoặc làm điều gì đó sai không?

Cảm ơn :)

Lưu ý: tôi nhận được lỗi ngay cả với các biến ban đầu và các tập tin mixins, vì vậy nó không kết nối với các ghi đè hoàn thành chúng.

Answer 1

Bạn đã thử đổi tên tệp thành buttons.css.less nhưng giữ tiện ích mở rộng khỏi @import (tức là, @import "buttons")?

Đó là cách tôi làm điều đó với SCSS và nó hoạt động tốt.

Một ý nghĩ khác là thay thế //=require custom-style trong application.css.less bằng chỉ thị @import "custom-style". Các Rails Guide here khuyến cáo sử dụng @import (mà được xử lý với SCSS/LESS) hơn //=require (được chế biến với Bánh răng):

If you want to use multiple Sass files, you should generally use the Sass @import rule instead of these Sprockets directives. Using Sprockets directives all Sass files exist within their own scope, making variables or mixins only available within the document they were defined in.

Answer 2

tôi có thể nghĩ đến một trong hai khả năng ngay bây giờ:

1) Bạn nên thay đổi application.css.scss thành application.css.ít hơn và sử dụng:

@import "custom-style";

thay cho sprockets //= require ...

2) Trình biên dịch LESS là rất khó tính về dấu chấm phẩy của nó. Tôi nhận thấy rằng bạn có @import "custom-style/buttons" - phải là @import "custom-style/buttons";

Dunno nếu vấn đề thực sự đơn giản nhưng đó là sự khởi đầu.

Answer 3

Điều này không thực sự trả lời câu hỏi của bạn, nhưng lý do duy nhất bạn đang trộn sass và ít hơn để sử dụng twitter bootstrap? Nếu bạn thích sử dụng chỉ sass, có một số đá quý bootstrap nơi các tác giả chuyển đổi ít để scss, như bootstrap-sass. Trước khi tôi lãng phí quá nhiều thời gian cố gắng để sắp xếp cả hai trong một dự án, tôi hoàn toàn mua vào một hay khác, nhưng đó chỉ là ý kiến ​​của tôi.