Magento 2 - सीएसएस का उपयोग किए बिना ओवरराइडिंग! हर जगह महत्वपूर्ण!

Question

मैं एक ग्राहक के लिए इस समय एक Magento 2 साइट पर काम कर रहा हूँ। मान लीजिए कि मेरे ग्राहक का ब्रांड है boofarऔर मैं जिस विषय को बढ़ाने / ओवरराइड करने का प्रयास कर foobarरहा हूं, क्या मैंने मूल विषय का उपयोग करके सेट किया हैfrontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

फिर frontend/Foobarthemes/boofar/web/css/source/_theme.lessमैंने सीएसएस कोड लिखा है जिसके तहत मैं ओवरराइड करना चाहता हूं। मैंने इसके साथ प्रयास भी किया है _extend.less।

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

मैं !importantयहाँ काम करने के लिए कुछ भी उपयोग करने के लिए मजबूर हूँ । उपरोक्त कोड में कोई भी फ़ॉन्ट और पाठ सामग्री काम नहीं करती है।

क्या मैं Magento 2 फ्रंटएंड वर्कफ़्लो को सही तरीके से नहीं समझ पाया हूं?

Comments

मूल सीएसएस नियम कहां पाया जाता है?

— एरोन एलेन

magento.stackexchange.com/questions/102994/… devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/… magento.stackexchange.com/questions/112655/… magento.stackexchange.com/questions / १० /६'४ /…

— अंकित शाह

इसे वेब / css / custom.css (सिंपल css) में अपडेट करने का प्रयास करें और var / folder और pub / static / content / frontend / yourtheme_package / yourtheme / en_US / css फ़ोल्डर को हटाने और php bin / magento सेटअप को चलाने के लिए न भूलें: स्थिर -सेंट: कमांड की तैनाती।

— एनआईटी

आपने थीम "xml" foobar1 "में मूल विषय" foobar "के लिए नहीं है

— St3phan

Answer 1

_theme.lessयदि आप मूल विषय की _theme.lessफ़ाइल को ओवरराइड करना चाहते हैं, तो आप फ़ाइल में अपनी शैली रखना चाहते हैं । उस फ़ाइल के लिए, उनमें से केवल एक लोड किया गया है, और यह हमेशा चयनित विषय होगा यदि फ़ाइल वहां मौजूद है। वहां से, वह उस फ़ाइल को खोजने और उसका उपयोग करने के लिए फ़ॉलबैक योजना का उपयोग करेगा।

तो आपके मामले में, _extend.lessफ़ाइल का उपयोग करना सही फ़ाइल है।

यह थोड़ा भ्रामक है, हालांकि, _extend.lessफ़ाइल में डाला गया कोड अंतिम तब लोड किया जाता है जब Magento साइट में मौजूद सभी शैलियों को संकलित करता है। तो मैं सोच रहा था कि क्या लोड ऑर्डर के साथ कुछ गड़बड़ है।

जिस तरह से आपने इसे स्थापित किया है, उसे देखते हुए, अपने विषय को एक अलग नामस्थान में स्थापित करने का प्रयास करें, न कि एक ही विषय में। यह समस्या को हल नहीं कर सकता है, जिस तरह से आप अपने विषय सेट अप के रूप में ही है Mag Maga luma / blank विषय सेट है। लेकिन मेरे द्वारा किए गए सभी कार्यों के लिए, मेरे पास मेरे नाम का नाम स्थान है, जो तब किसी तृतीय पक्ष थीम से, या लूमा / रिक्त से विस्तारित होगा।

अगली कोशिश में आपका कोड बिल्ट इन मीडिया क्वैश्चंस होगा। मैं यहां अधिक विस्तार में जाता हूं , लेकिन मूल रूप से यह आपकी शैलियों को दो बार फाइलों styles-l.cssऔर styles-m.cssफाइलों में लोड होने से रोकता है ।

//
//    Common
//--------------------------------------
& when (@media-common = true) {}  

वहां से, यह सभी सीएसएस विशिष्टता के लिए नीचे आता है। अगर कुछ और है, तो आपका है, आपको अपनी शैलियों में अपनी कक्षा / आईडी परिभाषा में अधिक विशिष्ट होना चाहिए। आप जो लक्ष्य कर रहे हैं उसे दिखाने के लिए DOM संरचना की एक तस्वीर पोस्ट करना चाहते हैं और जो आप लक्ष्य करना चाह रहे हैं उस पर सवारी करना चाहते हैं।

Comments

अच्छी बात - शायद मैं जिस विषय (3 पार्टी) का उपयोग कर रहा हूँ वह कुछ अजीब हो रहा है, लेकिन आप क्या कह रहे हैं यदि मैं डिफ़ॉल्ट विषय के लिए एक ही ओवरराइड करता हूं, तो मुझे इसका उपयोग नहीं करना चाहिए! यह एक कोशिश के काबिल है?

— फ्रांसिस किम

मैं हां, तो आप सिर्फ बस के साथ एक त्वरित विषय बना सकते हैं लगता है registration.php, theme.xmlवेब फ़ोल्डर और। पुनरावर्ती और फिर उसे व्यवस्थापक में चुनें और देखें कि क्या होता है। मैं कुछ और सोच रहा हूं, लेकिन यह मेरे दिमाग में एक संभावना के रूप में है।

— सर्किल्स

इसके अलावा, एक पवित्रता की जाँच के रूप में, आप एक मूल्य में डाल सकते हैं जो आपकी शैलियों में अद्वितीय है (जैसे background-color: tomatoकि कोई भी उस रंग का उपयोग नहीं करना चाहेगा) और संकलित शैलियों में यह देखने के लिए जांचें कि शीट में यह कहाँ समाप्त हो रही है। pub/static/frontend/{package}/{theme}/en_us/cssदोनों शैलियों फ़ाइलों के लिए देखो । यदि यह फ़ाइल के अंत में नहीं है, तो कुछ डिफ़ॉल्ट लोड ऑर्डर के साथ खराब हो रहा है।

— 5

Answer 2

यदि आप अपनी शैलियों को _extend.less फ़ाइल में लागू करने में सक्षम हैं, तो इसका मतलब है कि आपको सीएसएस विशिष्टता के साथ समस्या है। चूंकि Magento2 कम संकलन का उपयोग करता है, इसलिए अधिकांश शैलियाँ बहुत विशिष्ट हैं। उन्हें ओवरराइड करने के लिए, आपकी शैली चयनकर्ताओं को अधिक या समान रूप से विशिष्ट होना चाहिए। मैं स्वयं इस अवधारणा का विवरण यहाँ पोस्ट नहीं करूँगा क्योंकि बहुत सारे लेख ऑनलाइन मिल सकते हैं।

Answer 3

यदि आप डिफ़ॉल्ट LESS सेटअप का उपयोग कर रहे हैं तो सुनिश्चित करें कि आपका सभी LESS M2 LESS मीडिया क्वेरीज़ के अंदर लिखा गया है। यदि आप डुप्लिकेट सीएसएस और शायद विशिष्टता समस्याओं के साथ समाप्त नहीं करेंगे।

---

यह सब विशिष्टता और लोड ऑर्डर के लिए नीचे आता है, आपके सीएसएस को मूल विषयों (या मॉड्यूल) के बाद लोड किया जाना चाहिए ताकि यह सब खत्म करने के लिए आपको उनकी विशिष्टता को पूरा करना पड़े।

उदाहरण के लिए यदि मूल विषय का उपयोग करता है

.parent-selector .selector {
    ...
}

फिर आपको उसी चयनकर्ता को लिखना होगा, अगर किसी कारण से वह काम नहीं करता है, तो आपको इससे पहले एक और चयनकर्ता जोड़ने की आवश्यकता नहीं है। एक आसान तरीका यह है कि शरीर को इससे पहले जोड़ा जाए, क्योंकि यह हर चयनकर्ता को कवर करता है और विशिष्टता जोड़ता है। इस तरह:

body .parent-selector .selector {
    ...
}

इस लेख में CSS विशिष्टता पर कुछ अच्छी जानकारी दी गई है।

वैकल्पिक रूप से आप पूरी फ़ाइल को अधिलेखित कर सकते हैं

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

Answer 4

उच्च प्राथमिकता के लिए आप चयनकर्ता की नकल कर सकते हैं:

  .home.home {
    display: none;
  }

Comments

अच्छा सुझाव! लेकिन दुर्भाग्य से मैं उसके बाद नहीं हूं।

— फ्रांसिस किम

Answer 5

आपको .lessमूल विषय की उसी फ़ाइल को ओवरराइड करना होगा जिसे आप ओवरराइड करना चाहते हैं, जैसे यदि आप _theme.lessफ़ाइल को ओवरराइड करना चाहते हैं , तो आपको इस फ़ाइल को यहाँ पर चाइल्ड थीम पर कॉपी करना होगा (सुनिश्चित करें कि मूल विषय का एक ही पथ)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

आप यहाँ अपने सीएसएस को ओवरराइड कर सकते हैं।

Answer 6

अपनी कस्टम सीएसएस फ़ाइलों को इंजेक्ट करना बेहतर है।

और पढ़ें: Magento 2 में एक कस्टम सीएसएस फ़ाइल कैसे जोड़ें

और मैज डॉक्स: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

सीएसएस को संसाधित करने के लिए ग्रन्ट / कम का उपयोग करके संकलन करना याद रखें: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html