sprockets - nhiều điểm vào?

Question

Sprockets official documentation nói rõ rằng:

Sprockets takes any number of source files and preprocesses them 
line-by-line in order to build a `single` concatenation. 

Tôi là một fan hâm mộ lớn của sprockets trong Rails nhưng đây là vấn đề - ứng dụng của tôi có hỗ trợ nhiều layout (trình duyệt máy tính để bàn) và khách hàng điện thoại di động (iphone, ipad, điện thoại android v.v.)

Cả hai bố cục này đều yêu cầu quy tắc CSS đặt lại HTML của riêng chúng. Quy tắc ghép nối của máy tính để bàn & tệp đặt lại trên thiết bị di động sẽ tạo ra xung đột vì chúng ghi đè chỉ thị CSS cấp thấp.

Tôi làm cách nào để khắc phục điều đó?

Answer 1

Tôi giả sử bạn đã có bố cục khác nhau cho từng thiết bị hoặc nhóm thiết bị. Nếu vậy, chỉ cần bao gồm một tệp css cấp cao nhất khác nhau trong mỗi tệp, sau đó có các câu lệnh yêu cầu khác nhau trong các tệp cấp cao nhất đó. Nếu bạn đang sử dụng Rails 3.1, không có lý do gì bạn phải giữ dòng tích hợp bao gồm tất cả các tệp css.

Answer 2

Tôi không thực sự chắc chắn nếu sprockets hỗ trợ này nhưng tôi biết rằng nếu bạn sử dụng đá quý Jammit. Bạn có thể thiết lập các gói khác nhau với mỗi gói cocktail JS hoặc css của riêng bạn. ví dụ. có một gói: không gian làm việc cho máy tính để bàn và và: gói di động dành cho điện thoại di động. tất cả Nó được định nghĩa trong một tập tin cấu hình YAML và nó sẽ concat chúng theo thứ tự bạn liệt kê chúng, có thể giúp phụ thuộc cắm đúng, vv

javascripts: 
    workspace: 
    - public/javascripts/vendor/jquery.js 
    - public/javascripts/lib/*.js 
    - public/javascripts/views/**/*.js 
    - app/views/workspace/*.jst 

    mobile: 
    - public/javascripts/vendor/jquery.js 
    - public/javascripts/lib/mobile.js 


stylesheets: 
    common: 
    - public/stylesheets/reset.css 
    - public/stylesheets/widgets/*.css 
    workspace: 
    - public/stylesheets/pages/workspace.css 
    mobile: 
    - public/stylesheets/pages/mobile.css 

Jammit thể là giá trị một cái nhìn hợp với nhu cầu của bạn

Hy vọng điều này sẽ giúp.

Answer 3

Bạn có thể nhận được nhiều tệp CSS cấp cao nhất bằng cách tạo tệp Sprocket cho mỗi tệp. Ví dụ: giả sử bạn muốn desktop.css để bao gồm reset.css, common.css và ie.css và mobile.css để bao gồm common.css và ios.css. Bạn sẽ có những file sau:

• app/assets/stylesheets/desktop.css
• app/assets/stylesheets/mobile.css
• app/assets/stylesheets/reset.css
• app/assets/stylesheets/common.css
• app/assets/stylesheets/ie.css
• app/assets/stylesheets/ios.css

Trong desktop.css, bạn sẽ phải như sau:

/* 
*= require reset.css 
*= require common.css 
*= require ie.css 
*/ 

Trong mobile.css, bạn sẽ phải như sau:

/* 
*= require common.css 
*= require ios.css 
*/ 

Sau đó, trong app/views/layouts/desktop.html.erb, bạn sẽ làm gì

<%= stylesheet_link_tag :desktop, :debug => Rails.env.development? %> 

và tương tự cho mobile.html.erb .

Cuối cùng, bạn sẽ cần phải thiết lập danh sách tài sản precompiled trong config/environments/production.rb:

config.assets.precompile = %w(desktop.css mobile.css)