Magento 2 में ओवरराइडिंग ब्लैंक थीम शैलियाँ

Question

जब आप Magento 2 में रिक्त विषय से विरासत में लेते हैं, तो आप कस्टम थीम के लिए नेविगेशन शैलियों को ओवरराइड करने के बारे में कैसे जाएंगे?

theme.cssमेरे app/design/frontend/<Vendor>/<theme>/web/cssफ़ोल्डर में एक फ़ाइल है , लेकिन मुझे पता है कि Magento 2 LESS का उपयोग करता है। मैं अपनी theme.cssस्टाइलशीट के भीतर शैलियों को आसानी से ओवरराइड कर सकता हूं , लेकिन मैं इसका उपयोग नहीं करना चाहता !important।

इसके अलावा, मैं बूटस्ट्रैप 3 का उपयोग कर रहा हूं, और मैं मान रहा हूं कि रिक्त विषय की शैलियाँ बूटस्ट्रैप में मेल खाने वाले किसी भी शैली निर्देश को ओवरराइड कर देंगी। इसके लिए सबसे अच्छा तरीका क्या है?

Answer 1

Magento द्वारा अनुशंसित 2 तरीके एक मूल विषय से शैलियों को ओवरराइड या विस्तारित करने के लिए हैं:

1. सरल तरीका

बढ़ाएँ:

अपनी थीम डायरेक्टरी में, एक web/css/sourceसब-डायरेक्टरी बनाएं । (आप पहले ही इस भाग को कर चुके हैं) _extend.lessवहाँ एक फ़ाइल बनाएँ ।

प्रलेखन के अनुसार :

"मूल विषय का उपयोग करते हुए _extend.less का उपयोग करते हुए एक थीम का विस्तार करना सबसे सरल विकल्प है जब आपके पास मूल विषय के साथ सब कुछ खुश है, लेकिन अधिक शैलियों को जोड़ना चाहते हैं।"

ओवरराइड:

_extend.lessफ़ाइल बनाने के बजाय , आप एक _theme.lessफ़ाइल बनाएँ । इस मामले में आपको उन सभी चरों की प्रतिलिपि बनाने की आवश्यकता है जो आपको माता-पिता से चाहिए _theme.less, जिनमें वे भी शामिल नहीं हैं। फिर अपने बदलाव करें।

प्रलेखन के अनुसार , दोष यह है:

जब भी माता-पिता का _theme.less अपडेट किया जाता है, तो आपको अपनी फ़ाइलों को मॉनिटर करने और मैन्युअल रूप से अपडेट करने की आवश्यकता होती है। "

---

2. संरचित तरीका

बढ़ाएँ:

यह विधि आपको अपने कोड को बेहतर तरीके से व्यवस्थित करने देती है। आपके परिवर्तन संरचित होंगे। अपने सभी परिवर्तनों को शामिल करने के लिए एक एकल _extend.less फ़ाइल का उपयोग करने के बजाय , आप उस Magento UI लाइब्रेरी से प्रत्येक घटक के लिए एक विस्तार फ़ाइल बनाएँ जिसे आप बदलना चाहते हैं।

कहते हैं कि आप बटन और नेविगेशन घटकों से शैलियों का विस्तार करना चाहते हैं। अपनी थीम डायरेक्टरी में 2 फाइलें बनाएँ: _buttons_extend.lessऔर _navigation_extend.less, फिर संबंधित फ़ाइल में प्रत्येक घटक के लिए अपने बदलाव जोड़ें।

फिर आप _extend.lessइस कोड को जोड़ने वाली फ़ाइल बनाएँ :

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

ओवरराइड:

अपने विषय में, उस UI घटक के अनुरूप फ़ाइल की एक प्रति बनाएँ जिसे आप बदलना चाहते हैं ( _buttons.lessऔर _navigation.less, आदि) यह फ़ाइल _buttons.lessमूल विषय के ओवरराइड कर देगी ।

ओवरराइड और विस्तारित के बीच अंतर को नोटिस करना महत्वपूर्ण है ।

आप इस दस्तावेज़ में ओवरराइडिंग और विस्तार करने या सीएसएस के बारे में सीमेन्ट डेवलपर गाइड में 2 पर पढ़ सकते हैं ।

Comments

तो चलिए मैं बताता हूं कि मेरे पास एक Vendor_Namespace Folder है, मैं वहां "web / css / source / _extend.less" नाम का एक और फ़ोल्डर जोड़ देता हूं और _extend.less-file को web / css / source / में जान लेता हूं कि संबंधित फाइल कहां है? क्या मैं इसे सही ढंग से समझता हूं

— मैक्स

हां, बस फ़ाइल बनाएं web/css/source/_extend.lessऔर अपनी शैलियों को वहां रखें।

— लुइस गार्सिया

मैंने एक _extend.less फ़ाइल wicth आयात बनाया है एक _slider.less: <theme_folder> / css / source / दोनों फाइलें एक ही पथ में हैं, लेकिन काम नहीं, _slider.less में सभी नियम नहीं पाए गए हैं। फाइलें उत्पन्न होती हैं। मैं डेवलपर मोड में हूं और "php magento सेटअप: स्टैटिक-कंटेंट: तैनाती"

— xzegga

क्या आपने अपने ब्राउज़र का कैश हटा दिया है?

— लुइस गार्सिया

क्या मैं <theme_folder> / css / source / lib / variables को ओवरराइड कर सकता हूं? मैं एक कम फ़ाइल के एक चर को कैसे बदल सकता हूं? (यह कहता है कि मैं उदाहरण के लिए @ बटन-पृष्ठभूमि को ओवरराइड करना चाहता हूं) - मुझे इसे _buttons_extend.less के अंदर लिखने की आवश्यकता है या मैं सभी लिन / वेब / css / स्रोत को ओवरराइड कर सकता हूं / lib / चर

— गोल्डी

Answer 2

मुझे फाउंडेशन का उपयोग करने में इसी तरह की समस्या थी। ऐसा करने का आधिकारिक तरीका विशिष्ट मॉड्यूल की कम फ़ाइल को ओवरराइड करना और वहां सीएसएस को संशोधित करना है। यह संकलन के दौरान Magento द्वारा उठाया जाएगा

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

अंततः मैंने Magento द्वारा बनाई गई सभी डिफ़ॉल्ट CSS फाइलों को हटा दिया। मुझे कस्टम सीएसएस लिखना बहुत आसान लगा, विशेष रूप से बूटस्ट्रैप जैसे ढांचे का उपयोग करके, सभी विभिन्न मॉड्यूल को ओवरराइड करने की कोशिश करने से। आप इसमें कर सकते हैं:

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

Comments

सामान रखने का अच्छा तरीका। लेकिन सवाल एक पूर्ण विषय "विस्तार" और इसके बारे में अधिक जोड़ने के बारे में है।

— मिगुएल फेलिप गुइलेन कैलो

नहीं, सवाल ओवरराइड करने के बारे में है।

— ब्लैक

Answer 3

मान लें कि आप शैलियों-m.css को ओवरराइड करना चाहते हैं , तो web/cssअपनी थीम की कॉपी रखें , इसे कस्टम-स्टाइल-m.css नाम दें ।

फिर अपने थीम default_head_blocks.xml में इस कोड का उपयोग करें :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...