2011-06-14 13 views
7

Sprockets official documentation स्पष्ट रूप से कहा गया है कि:sprockets - एकाधिक प्रविष्टि अंक?

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

मैं रेल में sprockets का एक बड़ा प्रशंसक हूँ, लेकिन यहाँ समस्या है - अपने आवेदन से अधिक लेआउट (डेस्कटॉप ब्राउज़र) और मोबाइल ग्राहकों (iPhone, iPad एंड्रॉयड फोन का समर्थन किया है आदि)।

इन दोनों लेआउट को अपने स्वयं के एचटीएमएल रीसेट सीएसएस नियमों की आवश्यकता है। डेस्कटॉप & मोबाइल रीसेट फाइलों के समेकित नियम एक संघर्ष करेंगे क्योंकि वे निम्न स्तर के सीएसएस निर्देशों को ओवरराइड करते हैं।

मैं इसे कैसे ठीक कर सकता हूं?

उत्तर

0

मुझे लगता है कि आपके पास प्रत्येक डिवाइस या डिवाइस समूह के लिए पहले से ही अलग-अलग लेआउट हैं। यदि ऐसा है, तो प्रत्येक में एक अलग शीर्ष-स्तरीय सीएसएस फ़ाइल शामिल करें, फिर उन शीर्ष-स्तरीय फ़ाइलों में अलग-अलग आवश्यकताएं होंगी। यदि आप रेल 3.1 का उपयोग कर रहे हैं, तो आपको कोई भी कारण नहीं है कि आपको अंतर्निहित लाइन रखना है जिसमें सभी सीएसएस फ़ाइलें शामिल हैं।

+0

मैं "भिन्न शीर्ष-स्तर सीएसएस फ़ाइल" का उपयोग करने, क्योंकि यह हमेशा एक एक का उपयोग करने के मुझे मजबूर कोशिश कर विफल। – user80805

2

मुझे सच में यकीन नहीं है कि अगर स्पॉकेट इसका समर्थन करता है लेकिन मुझे पता है कि यदि आप Jammit मणि का उपयोग करते हैं। आप अपने जेएस या सीएसएस फाइलों के अपने कॉकटेल के साथ प्रत्येक को अलग-अलग पैकेज सेट कर सकते हैं। जैसे एक है: डेस्कटॉप के लिए वर्कस्पेस पैकेज और: मोबाइल के लिए मोबाइल पैकेज। यह सब एक config YAML फ़ाइल में परिभाषित किया गया है और यह आप उन्हें सूचीबद्ध क्रम में उन्हें concat होगा, मदद कर सकते हैं जो मिल प्लगइन निर्भरता सही आदि

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 अपनी आवश्यकताओं के लिए एक नज़र लायक हो सकता है

उम्मीद है कि यह मदद करता है।

+0

यह बहुत अच्छा काम किया! धन्यवाद – user80805

7

आप प्रत्येक के लिए स्पॉकेट फ़ाइल बनाकर कई शीर्ष-स्तरीय सीएसएस फाइलें प्राप्त कर सकते हैं। उदाहरण के लिए, आप desktop.cssreset.css, common.css, और ie.css और mobile.css शामिल होने के लिए common.css और ios.css शामिल होना चाहते हैं। आप निम्न फ़ाइलें होगा:

  • 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

में, आप निम्नलिखित होंगे:

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

फिर, app/views/layouts/desktop.html.erb में, आप

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

और इसी तरह करना होगा mobile.html.erb के लिए:

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

mobile.css में, आपको निम्न होता है ।

अंत में, आप config/environments/production.rb में precompiled संपत्ति सूची सेट करने की आवश्यकता होगी:

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

यह ध्यान देने योग्य है कि precomile सूची में scss/कॉफी फ़ाइलों को जोड़ना काम नहीं करेगा! (और कोई त्रुटि फेंक दो, या तो!)। आपको केवल .js/css एक्सटेंशन के साथ नाम देना होगा। –