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

क्या मेरी अपनी CSS फ़ाइल बनाने का कोई तरीका है जो कैस्केड में लोड होता है?

यदि हां, तो मैं अपनी कस्टम CSS फ़ाइल कैसे और कहाँ जोड़ूँ?

magento2 css

जवाबों:

कस्टम सीएसएस जोड़ने और अंतिम लोड करने के लिए, आपको एक कस्टम थीम सेट करना होगा।

थीम बनाएँ: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
सुनिश्चित करें कि आपने अपना Magento एप्लिकेशन डेवलपर मोड में सेट किया है।
अपने कस्टम थीम में निम्न फ़ोल्डर जोड़ें

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

निम्न फ़ाइलें बनाएँ:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

इस कोड को default_head_blocks.xml के भीतर रखें

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>

अपनी थीम लागू करें: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
स्थैतिक संसाधनों को तैनात करें (SSH to magento root):

php bin/magento setup:static-content:deploy

— Joshua34
स्रोत

नमस्ते, मैंने ऐसा ही किया था, लेकिन मेरे द्वारा डाली गई css फ़ाइल लोड नहीं होती है, और जब मैं पृष्ठ का निरीक्षण करता हूं तो यह मुझे फ़ाइल के लिए एक GET त्रुटि देता है, 500 (आंतरिक सर्वर त्रुटि) के साथ आपको कोई भी विचार मिला है कि यह क्या है हो सकता है?

— एलेक्सक्र

CLI कमांड को तैनात करने के लिए: php बिन / magento सेटअप: स्थिर-सामग्री: तैनात

— जोशुआ 34

मेरे द्वारा बनाई गई दो नई CSS फाइलों में मुझे क्या करना चाहिए? बस शुद्ध सीएसएस ??

— 14

@styzzz हां, कच्ची सीएसएस ठीक है।

— जोशुआ 34

हाँ। मैंने बस यही किया है, स्थानीय / m.css और स्थानीय- l.css फ़ाइलों को वेब / css में अपलोड किया है .... कैश साफ़ किया और php बिन / magento सेटअप: स्टेटिक-कंटेंट: परिनियोजित किया। मैं डेवलपर मोड में हूं। यह अभी भी उन्हें नहीं उठा रहा है। मेरा default_head_blocks.xml ऊपर जैसा है। लेकिन इसका अभी भी उन सीढ़ियों का उपयोग नहीं कर रहा हूं जिन्हें मैंने CSS में सेट किया है

— styzzz

कस्टम सीएसएस जोड़ने और अंतिम लोड करने के लिए

निर्देशिका संरचना का पालन करें

app / कोड / विक्रेता / modulename / view / frontend (व्यवस्थापक के लिए व्यवस्थापक)
नीचे दिए गए अनुसार संबंधित लेआउट फ़ाइल में सीएसएस फ़ाइल पथ जोड़ें
```
<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>
```

— मनीष
स्रोत

सहित Vendor_Moduleमेरे लिए काम नहीं कर रहा है। इसे हटाकर काम करना ठीक है।

— सरवनन डीएस

@SaravananDS आपको अपने पैकेज और मॉड्यूल नाम के साथ बदलने की आवश्यकता है।

— मनीष

हाँ। मेरे रिवाज से बदलने के बाद Vendor_Moduleही यह काम नहीं कर रहा है।

— सरवनन डीएस

@ गायब, क्या हम केवल खोज परिणाम पृष्ठ में कस्टम सीएसएस फ़ाइल लोड कर सकते हैं?

— जाफर पिंजर

यहां बाल-विषय का उपयोग करने की आवश्यकता नहीं है?

— हाफिज उमर

आप मीडिया विशेषता को जोड़ सकते हैं जो magento 2 सिर अनुभाग में सीएसएस के अंत में डाल देगा। केवल 1px की चौड़ाई सेट करने से यह सभी उपकरणों पर सक्षम हो जाएगा:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

— Cypher909
स्रोत

धन्यवाद, आपने मेरा दिन बचाया। मैं ddint .less फ़ाइलों के साथ काम करना चाहता हूं और हर बार संकलित करता हूं जो मैं उन्हें संपादित करता हूं।

— बुकेक्स

यहाँ पहले कस्टम विषय बनाने की जरूरत नहीं है?

— हाफिज उमर

@HaFizUmer आपको पहले एक कस्टम थीम बनाना चाहिए। स्वीकृत उत्तर से निर्देशों का पालन करें और फिर मेरे द्वारा दिखाए गए तरीके का उपयोग करें।

— साइफर 909