Magento 2 में CSS फाइलों की स्थिति निर्धारण / आदेश देने का उचित तरीका क्या है?

14

में Magento 2 DevDoc यह कहता है

CSS फ़ाइल को शामिल करने के लिए, एक लेआउट फ़ाइल में <head> अनुभाग में <css src = "<path> / <file>" मीडिया = "<<>>"> ब्लॉक जोड़ें।

हालाँकि यह नहीं कहता है कि हम अपनी CSS फाइलों के क्रम को कैसे प्रभावित कर सकते हैं। और अगर हम सीएसएस फाइल को कस्टम थीम में इस तरह से जोड़ते हैं जिसमें मूल विषय होता है तो परिणाम यह होता है कि फाइल <head> अनुभाग में सबसे नीचे जोड़ दी जाती हैं जिसमें बहुत सी अन्य सीएसएस फाइलें होती हैं, जिसका अर्थ है कि उनकी प्राथमिकता काफी है निम्न और हम मूल विषय या एक्सटेंशन के नियमों को आसानी से ओवरराइड नहीं कर सकते।

मैगनेटो 1 में भी इसी तरह की समस्याएँ थीं और वर्कअराउंड थे। कुछ अधिक स्वच्छ थे और अन्य कम।
Magento 2 में <head> के नीचे एक कस्टम विषय की CSS फ़ाइल ऑर्डर करने का सबसे अच्छा तरीका क्या है - यदि संभव हो तो कस्टम विषयों के लिए Magento 2 लेआउट दिशानिर्देशों का अनुपालन करना?

— जे डीडॉर्क
स्रोत

14

Magento2 के पास इसके लिए कोई अंतर्निहित तंत्र नहीं है इसलिए मैंने इसे अपना पहला Magento2 एक्सटेंशन लिखने के अवसर के रूप में माना। Quickshiftin \ Assetorderer विस्तार अब GitHub पर उपलब्ध है!

एक बार आपके पास एक्सटेंशन स्थापित हो जाने के बाद आप अपने css XML टैग में एक ऑर्डर विशेषता निर्दिष्ट कर सकते हैं ।

<head>
  <css src="css/page/home.css" order="100"/>
</head>

आप इस तरह के रूप में लेआउट XML फ़ाइलों में आदेश विशेषता का उपयोग कर सकते हैं default_head_blocks.xml। किसी भी सीएसएस टैग के लिए आप एक आदेश निर्दिष्ट नहीं करते हैं जैसे कि उनके पास 1 का आदेश है।

— quickshiftin
स्रोत

बहुत धन्यवाद। आपके विस्तार ने मेरे लिए काम किया। लेकिन दो मुद्दों में से एक का सामना करना पड़ा di.xml और एक में क्विकशिफ्टिन \ एसेटऑर्डरर \ व्यू \ एसेट \ फाइल क्लास।

— पंकज पारीक

हाय @ पंकजप्रीक, यह अच्छी खबर है और बुरी है। कोई भी मौका जिसे आप GitHub पर विस्तृत कर सकते हैं और संभवतः एक पुल अनुरोध में योगदान कर सकते हैं? विस्तार को सभी के लिए उपयोगी बनाना अच्छा होगा!

— क्विकशिफ्टिन

@quickshiftin इस एक्सटेंशन ने v2.0 में काम किया, लेकिन v2.1.1 नहीं। हालाँकि, मुझे संयोग से पता चला कि v2.1.1 में इसकी आवश्यकता नहीं है क्योंकि जब मैं order="1"फ़ाइल जोड़ता हूँ तो सही तरीके से ऑर्डर किया जाता है। इससे कोई फर्क नहीं पड़ता कि जब तक आप अतिरिक्त विशेषता नहीं जोड़ते हैं, तब तक विशेषता क्या है। इसे वैध बनाने के लिए, आप इसे बदल सकते हैं data-order="1"और यह अभी भी काम करेगा।

— 07

जेएस फाइल के लिए भी ऑर्डर का काम।

— जलप्रेश पटेल

@quickshiftin ने आपने M2.2.2 के लिए अपने मॉड्यूल को अपडेट किया है

— PƏINC

7

आप mediaसीएसएस तत्व में विशेषता जोड़ सकते हैं । यह इसे सिर में शामिल सभी सीएसएस के अंत में जोड़ देगा।

<head>
    <css src="css/styles.css" media="all" />
</head>

— andyace
स्रोत

अगर मुझे यह पहले चाहिए तो क्या होगा?

— TheBlackBenzKid

यह अभी भी मुख्य Magento 2 कोर सीएसएस फ़ाइलों से पहले कस्टम सीएसएस लोड करेगा :(

— जोनाथन Marzullo

M2.2.1 के रूप में यह एकमात्र समाधान है जो मेरे लिए काम करता है। <Css> नोड में 'ऑर्डर = "X" जोड़ने से एक त्रुटि आती है क्योंकि यह विशेषता अनुमत नहीं है।

— डायनामाइट

2

मैंने यहां विस्तार से उत्तर दिया कि कैसे मैगेंटो सीएसएस प्रदान करता है और दृश्य के पीछे क्रम कैसे हो रहा है।

कुछ अतिरिक्त बिंदु जो मुझे यहाँ बताने की आवश्यकता है:

यदि आप अपनी कस्टम सीएसएस फ़ाइल को प्रस्तुत करना चाहते हैं style-m.cssऔर stlyle-l.cssउसके बाद , आपको अपनी सीएसएस फाइल को नीचे की तरह परिभाषित करने की आवश्यकता है:
```
<css src="Magento_Theme:css/path/file.css" media="all" />
```
यदि आप अपनी कस्टम सीएसएस फ़ाइल को पहले लोड करना चाहते हैं style-m.cssऔर stlyle-l.css, तो आपको लेआउट xml फ़ाइल के माध्यम से अपनी सीएसएस फ़ाइल को शामिल करने और default_head_blocks.xmlऊपर अपनी कस्टम सीएसएस फ़ाइल जोड़ने की आवश्यकता है ।style-m.cssstlyle-l.css
सीएसएस गुण परिमित हैं और लेआउट स्कीमा में अच्छी तरह से परिभाषित हैं। लेआउट स्कीमा के अनुसार, आप अपनी सीएसएस फ़ाइल में निम्नलिखित गुणों का उपयोग कर सकते हैं।

फ़ाइल: vendor/magento/framework/View/Layout/etc/head.xsd
```
<xs:complexType name="linkType">
    <xs:attribute name="src" type="xs:string" use="required"/>
    <xs:attribute name="defer" type="xs:string"/>
    <xs:attribute name="ie_condition" type="xs:string"/>
    <xs:attribute name="charset" type="xs:string"/>
    <xs:attribute name="hreflang" type="xs:string"/>
    <xs:attribute name="media" type="xs:string"/>
    <xs:attribute name="rel" type="xs:string"/>
    <xs:attribute name="rev" type="xs:string"/>
    <xs:attribute name="sizes" type="xs:string"/>
    <xs:attribute name="target" type="xs:string"/>
    <xs:attribute name="type" type="xs:string"/>
    <xs:attribute name="src_type" type="xs:string"/>
</xs:complexType>
```
इसका सीधा सा मतलब है कि आप orderअपने लेआउट xml फ़ाइल में css परिभाषा के साथ या किसी अन्य गुण का उपयोग नहीं कर सकते । ऐसा करने पर, आपको एक अपवाद मिलेगा जो स्कीमा सत्यापन विफल होने का संकेत देता है।

— राजीव के टॉमी
स्रोत

1

आप अतिरिक्त CSS चयनकर्ताओं को जोड़कर या हटाकर अपने CSS नियमों को कोर CSS नियमों से अधिक या कम महत्वपूर्ण बना सकते हैं।
उदाहरण के लिए, आइए कोर में एक नमूना CSS नियम देखें:

.cart.table-wrapper .item .col.item {
    padding: 20px 8px 20px 0;
}

आप उदाहरण के लिए, माता-पिता चयनकर्ता को जोड़कर अपने कस्टम नियम को और अधिक महत्वपूर्ण बना सकते हैं:

body .cart.table-wrapper .item .col.item {
    padding: 10px 8px 20px 0;
}

या

body .cart.table-wrapper .item td.col.item {
    padding: 10px 8px 20px 0;
}

उदाहरण के लिए, माता-पिता चयनकर्ता को हटाकर आप अपने कस्टम नियम को कम महत्वपूर्ण बना सकते हैं:

.item td.col.item {
    padding: 30px 8px 20px 0;
}

— Mage2.PRO
स्रोत

3

ज़रूर और मैं भी बस स्मैक खा सकता हूं !important(लेकिन निश्चित रूप से आपका दृष्टिकोण अभी भी इससे बेहतर है) या लेस के साथ एक विक्रेता उपसर्ग वर्ग को लागू करें। फिर भी यह अनावश्यक ओवरहेड और जटिलता जोड़ता है। जब सीएसएस का एक सरल क्रम परिवर्तन होता है तो यह सैकड़ों या अधिक नियमों का उपसर्ग क्यों करता है? तो मैं अभी भी Magento की ओर से इसे हल करने के लिए एक अच्छे तरीके की तलाश कर रहा हूं ...

— Jey DWork

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

— Jey DWork

6

इसका जवाब नहीं है

— अहमद अल्फी