वेब / सीएसएस / स्रोत / मॉड्यूल में पाए जाने वाले मॉड्यूल को बढ़ाने का सबसे अच्छा तरीका, जैसे _minicart.less?

Question

<module>/web/css/source/module/उदाहरण के लिए, कम फ़ाइलों की सामग्री का विस्तार करने का सबसे अच्छा तरीका कौन सा है Magento_Checkout/web/css/source/module/_minicart.less?

यह मानते हुए कि

ए) ओवरराइड

1. विषय संबंधी कम आपको पेरेंट थीम के समान नाम से कम (या कॉपी) बनाना होगा और इसे अपने थीम में इस तरह डालना होगा theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
2. मॉड्यूल विशिष्ट कम जिसे आपको मूल विषय के समान नाम से कम (या प्रतिलिपि) बनाना होगा और इसे अपने थीम में इस तरह डालना होगा theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
3. यूआई लिबास कम आपको लाइब्रेरी फ़ोल्डर में समान नाम सामग्री के साथ कम (या कॉपी) बनाना होगा और इसे इस तरह से अपनी थीम में रखना होगा magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

और करने के लिए

बी) अतिरिक्त

1. विषय संबंधी कम आपको अपने विषय में एक _extend.less फ़ाइल बनानी होगी , इस तरह से नाम में _extend जोड़कर उस फ़ाइल को वेब / css / स्रोत में विषय सामग्री के _extend.less में @import निर्देश के साथ दर्ज <your-theme>/web/css/source/_navigation_extend.lessकरने के लिए ->theme-frontend-blank/web/css/source/_navigation.less@import "_navigation_extend.less"
2. मॉड्यूल विशिष्ट कम आपको अपने थीम मॉड्यूल पथ में एक _extend.less फ़ाइल बनाना होगा <your-theme>Magento_CatalogSearch/web/css/source/_extend.lessजो इस तरह से Magento_CatalogSearch मूल _module.less तक फैली हुई है
3. यूआई कम लिब आप जोड़ फ़ोल्डर पुस्तकालय में एक ही नाम की सामग्री के साथ एक कम बनाना होगा _extend इस तरह नाम पर <your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.lessविस्तार करने के लिए magento2-base/lib/web/css/source/lib/_buttons.lessऔर साथ उस फ़ाइल रजिस्टर @import वेब / सीएसएस / स्रोत में विषय सामग्री के _extend.less में निर्देश - >@import "lib/_buttons_extend.less"

थ्योरी आपको एक _minicart_extend.less बनाने का सुझाव देना चाहिए, लेकिन यह स्वचालित रूप से काम नहीं करता है। हो सकता है कि आपको उस मॉड्यूल के _extend.less में उस फ़ाइल को आयात करना चाहिए जैसे कि B1 या B3 में समझाया गया है?

और इन घटकों को कम क्यों बढ़ाया जाता है, स्वचालित रूप से सीएसएस के पार्सिंग में शामिल नहीं हैं यदि यह उन्हें विस्तारित करने का सही तरीका है, लेकिन _extend.less में आयात किया जाना चाहिए?

(यहां एक और सवाल भी आता है: अंतर क्या है ? web/css/source/lib/_buttons.lessऔर web/css/source/_buttons.lessquestion)

मैं थोड़ा उलझन में हूँ। आशा है कि कोई मेरी मदद कर सकता है।

इस लंबे पाठ के लिए क्षमा करें।

---

सूत्रों का कहना है:

• http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

• http://inchoo.net/magento-2/working-with-css-in-your-first-magento-2-project/comment-page-1/#comment-434125

Answer 1

Magento 2 सम्मेलनों के अनुसार, मॉड्यूल शैलियों का विस्तार करने का सबसे अच्छा तरीका इस प्रकार है:

यदि हम शैलियों का विस्तार करना चाहते हैं तो हमें Magento_Checkout/web/css/source/module/_minicart.less2 फाइलें रखने की आवश्यकता है

• <your-theme>/Magento_Checkout/web/css/source/_extend.lessजहां हम अपने कस्टम एक्सटेंशन आयात करेंगे। इस मामले में@import "_minicart_extend.less"

• <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less जिसमें हमारी कस्टम शैलियाँ होंगी।

कारण यह है कि हमें _extend.lessनिर्दिष्ट करने के लिए एक फ़ाइल की आवश्यकता @importsहै क्योंकि Magento में केवल _extend.lessप्रति मॉड्यूल स्वचालित रूप से शामिल है । सभी को *_extend.lessस्वचालित रूप से जाँचना और जोड़ना समय लेने वाला होगा और इसीलिए इसे इस तरह लागू नहीं किया गया।

Magento ब्लैंक थीम में, मिडीकार्ट के लिए जिम्मेदार फाइलें अंदर स्थित हैं /vendor/magento/theme-frontend-blank/Magento_Checkout/

हम अपनी सभी कस्टम शैलियों को भी सीधे जोड़ सकते हैं _extend.less। हालांकि, उन्हें मूल मॉड्यूल की तरह छोटी और विशिष्ट फ़ाइलों में विभाजित करने से कोड स्पष्ट और बेहतर व्यवस्थित रहता है। यह भी Magento 2 मानकों के अनुसार अनुशंसित तरीका है।

Comments

शुक्रिया @ जलगुट! तो, मैं "_minicart_extend.less" को "foobar.less" भी कह सकता हूं और इससे कोई फर्क नहीं पड़ेगा क्योंकि यह _extend.less में आपको @import करता है जो मायने रखता है। "_Extendd.less" को घटक नाम से जोड़ना यह सब कुछ अधिक स्पष्ट रखने में आपकी सहायता करने के लिए एक सम्मेलन है?

— लोरेना

वास्तव में, यह विचार है।

— जलगुट

@ जलगुत क्या आप उनके बारे में यह कहते हुए आश्वस्त हैं कि "सभी को जाँचना और जोड़ना * _extend.less स्वचालित रूप से समय लेने वाला होगा" या यह कोई अनुमान है? क्योंकि IMO यकीन है कि यह थोड़ा अधिक है, लेकिन इतना नहीं है, के रूप में डेवलपर्स बनाने के लिए हर बार वे अनुकूलित करना चाहते हैं (प्लस पहली बार में थोड़ा भ्रम)

— medmek

"इस कारण से हमें @imports निर्दिष्ट करने के लिए एक _extend.less फ़ाइल की आवश्यकता है क्योंकि Magento में केवल स्वचालित रूप से एक _extend.less प्रति मॉड्यूल शामिल है।" मुझे लगता है कि आपके कहने का मतलब यह है कि प्रत्येक मॉड्यूल में एक _extend.less है और वे अंत में एक बड़ी _extend.less फ़ाइल में विलय हो जाते हैं

— ब्लैक

"हम अपनी सभी कस्टम शैलियों को सीधे _extend.less में भी जोड़ सकते हैं" यह एक बुरा विचार है, क्योंकि " ग्रंट वॉच" इस फ़ाइल में बदलावों के लिए नहीं सुनता है। केवल आयात के लिए इसका उपयोग करें और grunt refreshइस फ़ाइल में परिवर्तन करने के बाद हमेशा कॉल करें ।

— काला