रेलिंग 3.1 संपत्ति पाइपलाइन का उपयोग सशर्त रूप से कुछ सीएसएस का उपयोग करने के लिए

Question

मैं रेलिंग 3.1.rc5 का उपयोग करके अपने पहले एकल रेल ऐप के निर्माण की प्रक्रिया में हूं। मेरी समस्या यह है कि मैं अपनी साइट को विभिन्न CSS फाइलों को सशर्त रूप से प्रस्तुत करना चाहता हूं। मैं ब्लूप्रिंट सीएसएस का उपयोग कर रहा हूं और मैं कोशिश कर रहा हूं कि स्प्रोकेट्स / रेल्स screen.cssज्यादातर समय print.cssकेवल रेंडरिंग करें, और ie.cssकेवल तब जब साइट इंटरनेट एक्सप्लोरर से एक्सेस हो।

दुर्भाग्य से, प्रकट *= require_treeमें डिफ़ॉल्ट आदेश में निर्देशिका application.cssमें सब कुछ शामिल है assets/stylesheetsऔर एक अप्रिय सीएसएस गड़बड़ी में परिणाम होता है। मेरा वर्तमान वर्कआउट एक तरह का ब्रूट-फोर्स मेथड है जहां मैं व्यक्तिगत रूप से सब कुछ निर्दिष्ट करता हूं:

Application.css में:

*= require_self
*= require home.css
...
*= require blueprint/screen.css

मेरी स्टाइलशीट में आंशिक (haml):

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

यह काम करता है लेकिन यह विशेष रूप से सुंदर नहीं है। मैंने इसे यहां तक ​​प्राप्त करने के लिए कुछ घंटों की खोज की है, लेकिन मैं उम्मीद कर रहा हूं कि इसे करने का कुछ आसान तरीका है जिसे मैंने अभी-अभी याद किया है। अगर मैं चुनिंदा निर्देशिकाओं को भी प्रस्तुत कर सकता था (उपनिर्देशिकाओं को शामिल किए बिना) तो यह पूरी प्रक्रिया को बहुत कम कठोर बना देगा।

धन्यवाद!

Answer 1

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

आप क्या करना चाहते हैं चीजों को तोड़ने के लिए अलग-अलग मैनिफ़ेस्ट फ़ाइलों का उपयोग करें। सबसे पहले आपको अपने app/assets/stylesheetsफ़ोल्डर को फिर से व्यवस्थित करना होगा :

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

फिर आप तीन प्रकट फ़ाइलों को संपादित करते हैं:

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

आगे आप अपनी एप्लिकेशन लेआउट फ़ाइल को अपडेट करते हैं:

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

अंत में, अपने कॉन्फ़िगर / वातावरण / उत्पादन में इन नई मेनिफ़ेस्ट फ़ाइलों को शामिल करना न भूलें:

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

अपडेट करें:

जैसा कि मैक्स ने कहा, यदि आप इस संरचना का अनुसरण करते हैं, तो आपको छवि संदर्भों से सावधान रहना होगा। आपके पास कुछ विकल्प हैं:

1. समान पैटर्न का पालन करने के लिए छवियों को स्थानांतरित करें
   • ध्यान दें कि यह केवल तभी काम करता है जब छवियां सभी साझा नहीं की जाती हैं
   • मुझे उम्मीद है कि यह सबसे गैर-स्टार्टर होगा क्योंकि यह चीजों को बहुत अधिक जटिल करता है
2. छवि पथ को योग्य बनाएं:
   • background: url('/assets/image.png');
3. SASS हेल्पर का उपयोग करें:
   • background: image-url('image.png');

Comments

हालांकि यह फाइलों का एक अच्छा संगठन है, मेरा मानना ​​है कि यह अभी भी उसी तरह से आवश्यक समस्या को हल करता है जिस तरह से सवाल खुद करता है।

— सपरोस

@ सेम्परोस, आप सही हैं कि समाधान का आकार अनिवार्य रूप से एक ही है, लेकिन मेरा प्रस्ताव अभी भी स्टाइलशीट की संपूर्णता के लिए परिसंपत्ति पाइपलाइन का उपयोग करने की अनुमति देता है। मुझे यकीन नहीं है कि जब तक शैलियों का एक और तरीका शामिल नहीं होता है जब तक कि यह एक अलग स्टाइलशीट पर न हो। कम से कम इस तरह से हम केवल मुट्ठी भर सीएसएस फाइलों का संकलन करते हैं।

— gcastro

रेल एसेट पाइपलाइन गाइड में ऐसा कुछ वास्तव में अच्छा होगा। धन्यवाद

— बशर अब्दुल्ला

हालांकि एक गोचा है: यदि आप इस संरचना का पालन करते हैं और सरल .cssफ़ाइलों का उपयोग करते हैं तो आपकी सभी छवियां टूट जाएंगी। उदाहरण के background: url('image.png')लिए पथ का अनुवाद किया जाएगा /assets/all/image.png( पथ में सभी को ध्यान में रखते हुए )। इसके बजाय यह काम करता है: background: url('/assets/image.png)। यदि इसका कोई आसान समाधान है तो कृपया इसे पोस्ट करें। SASS का उपयोग करने के अलावा, जिसमें सहायक विधियाँ हैं जो संभवत: सही तरीके से पथ को हल करती हैं।

— अधिकतम

@ExiRe, हाँ। कोई भी स्टाइलशीट या जेएस फाइलें / मेनिफेस्ट जो मानक पैटर्न का पालन नहीं करते हैं, उन्हें precompile array में जोड़े जाने की जरूरत है (देखें: guide.rubyonrails.org/asset_pipeline.html#precompiling-assets )

— gyroro

Answer 2

आज इस समस्या के पार आया।

सभी IE विशिष्ट स्टाइलशीट को लिब / संपत्ति / स्टाइलशीट में डालने और IE के संस्करण के लिए एक प्रकट फ़ाइल बनाने का प्रयास किया। फिर application.rb में उन्हें प्री-कम्पाइल करने के लिए चीजों की सूची में जोड़ें:

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

और आपके लेआउट में, सशर्त रूप से उन प्रकट फ़ाइलों को शामिल किया गया है और आप जाने के लिए अच्छे हैं!

Answer 3

यह करने के लिए एक बहुत साफ तरीका Thats। मैं html या modernizr पर सशर्त कक्षाओं का उपयोग करता हूं। क्या करता है पर एक अच्छा प्रतिनिधित्व के लिए इस लेख को देखें। modernizr-बनाम-सशर्त वर्गों-ऑन-एचटीएमएल