Magento2: सीएसएस फ़ाइलों को संशोधित करने के लिए सबसे अच्छा अभ्यास

Question

मैं css फ़ाइल को संशोधित करना चाहता हूं pub/static/frontend/Magento/luma/en_US/css/styles-l.css।
प्रारंभ में यह फ़ाइल पब / स्टेटिक फ़ोल्डर में मौजूद नहीं है और इसमें मौजूद है

vendor/magento/theme-frontend-blank/web/css/styles-l.less (it's styles-l.less)

जब मैं स्थैतिक सामग्री का उपयोग करता हूं php bin/magento setup:static-content:deploy, तो 2 फाइलें पब / स्टेटिक से संबंधित होती हैं।
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

मैं एक समर्थित डेवलपर हूं और मॉड्यूल विकसित करते समय मैं पब / स्टेटिक (.htaccess को छोड़कर) में जो कुछ भी मौजूद है, उसे डिलीट कर देता हूं। इसलिए मेरे लिए यह सीधे तौर पर संशोधित करने का सबसे अच्छा विकल्प नहीं है pub/static/frontend/Magento/luma/en_US/css/styles-l.css।

उस मामले में सीएसएस फ़ाइल के ऊपर संशोधित करने के लिए सबसे अच्छा अभ्यास क्या है?
1. मैं संशोधित करूंगा pub/static/frontend/Magento/luma/en_US/css/styles-l.lessया
2. मेरी समझ गलत है कि मैं pub/static(विकास के दौरान) से सब कुछ हटा सकता हूं और मुझे इसे संशोधित करना चाहिए pub/static/frontend/Magento/luma/en_US/css/styles-l.cssऔर इसे कभी नहीं हटाना चाहिए।

Answer 1

आपको पब / * या विक्रेता / * निर्देशिका के भीतर फ़ाइलों को संपादित / संशोधित नहीं करना चाहिए। पब तैनाती के लिए है और विक्रेता डिफ़ॉल्ट संरचना के लिए है, जिसे आप अपने टेम्पलेट या कस्टम मॉड्यूल के माध्यम से ओवरराइड करते हैं। बजाय:

• ऐप / डिज़ाइन / फ्रंटएंड / {वेंडर} / {yourTheme} / के अंदर एक नई थीम बनाएं। आप ब्लैंक या लूमा थीम का उपयोग कर सकते हैं। आप नई थीम भी बना सकते हैं, जो ब्लेंक से विरासत में मिली है (इनहेरिटेंस को theme.xml के भीतर परिभाषित किया गया है)। यदि आप पहले से ही किसी थीम का उपयोग कर रहे हैं तो इस चरण को छोड़ दें।
• अपने विषय के भीतर संपादन करें। ताकि कैश दिखाई देने या सिस्टम को अपग्रेड करते समय परिवर्तन दिखाई न दें।
• अपने .less को परिनियोजन फ़ाइलों में संकलित करने के लिए ग्रन्ट का उपयोग करें।
• आप थीम के भीतर अपने स्टाइल को पिन करने के लिए सोर्समैप्स भी सेट कर सकते हैं। बिना फाइलों के ताकि आप अधिक उत्पादक हो सकें।

कुछ उपयोगी संदर्भ:

• कम से शुरू हो रही है
• Magento 2 में कम डिबगिंग
• Magento 2 में एक थीम बनाएँ
• ग्रंट के साथ शुरुआत करना
• Magento UI लाइब्रेरी

Comments

धन्यवाद। मैं विषय का उपयोग कर रहा हूं Templatemonster/themeऔर विषय styles-l.lessमें मौजूद नहीं हूं । क्या मुझे इसे उपयोग / संशोधित vendor/magento/theme-frontend-blank/web/css/styles-l.lessकरने के app/design/frontend/Templatemonster/theme/web/css/styles-l.lessलिए कॉपी करना चाहिए ?

— अमितश्री '

नहीं, आपको टेम्प्लेटस्टर / थीम - शैलियों - * के भीतर कम फ़ाइलों को संपादित करना चाहिए। पब निर्देशिका के भीतर कम फाइलें पहले से ही आपके विषय और अन्य संसाधनों से संकलित फ़ाइलें हैं और संशोधित / परिवर्तित होने का उल्लेख नहीं है। जब आप अपनी फ़ाइलों को अपने TM थीम में संपादित करना समाप्त करते हैं, तो उन्हें अंतिम संसाधनों में संकलित करने के लिए ग्रंट रन करें, जिसे पब फ़ोल्डर में तैनात किया जाएगा। आप अपने विषय से कम फ़ाइलों को इंगित करने के लिए सोर्समैप का उपयोग भी कर सकते हैं।

— g5wx

एक बार फिर धन्यवाद। बस इसे स्पष्ट करने के लिए, अगर मुझे थीम styles-l.lessकी मौजूद कक्षाओं की संपत्ति को संशोधित करना है, तो मुझे magento/theme-frontend-blankअपने टीएम थीम में किसी भी (या नए) सीएसएस फ़ाइलों में उन कक्षाओं का उपयोग करना / लिखना चाहिए और तदनुसार संशोधित करना चाहिए। क्या मैगेंटो 1 magento/theme-frontend-blankमें base/defaultथीम उसी तरह व्यवहार करती है जैसे थीम काम कर रही थी?

— अमृतश्री '

हां, आप जो भी बदलाव करना चाहते हैं, वे आपके टेम्पलेट के भीतर परिलक्षित होने चाहिए, इसलिए संशोधन का दायरा उस टेम्पलेट के भीतर स्थानीय रहता है और उन्नयन पर अधिक नहीं मिलता है। एम 2 में ब्लैंक टेम्प्लेट में डिफ़ॉल्ट रूप में M1 जैसा ही मूल कार्य है - इसका मतलब है कि पहले से बनाई गई आधार परिभाषाएं और आपके विस्तारित विषय में उन तत्वों के लिए एक कमबैक हो सकता है जिन्हें आप संशोधित नहीं करते हैं।

— g5wx

Answer 2

इस दृष्टिकोण ने मेरे लिए काम किया है

.Less फ़ाइल में आवश्यक परिवर्तन करें और फिर निम्न कमांड चलाएँ:

php bin/magento setup:upgrade

php bin/magento cache:flush

Answer 3

यदि अन्य विषय आपको कॉन्फ़िगर करना चाहिए:

module.exports = {
    blank: {
        area: 'frontend',
        name: 'Magento/blank',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    luma: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

    porto: {
        area: 'frontend',
        name: 'Smartwave/porto',
        locale: 'zh_Hans_CN',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

    backend: {
        area: 'adminhtml',
        name: 'Magento/backend',
        locale: 'en_US',
        files: [
            'css/styles-old',
            'css/styles'
        ],
        dsl: 'less'
    }
};

Comments

देव / टूल्स / ग्रंट / कॉन्फिग्स / थीम.जेएस फाइल में

— पैट्रिक-पेंग

Answer 4

यह फ़्लोचार्ट है कि कैसे magento2 प्रक्रिया सीएसएस फ़ाइलें।

स्रोत: इंचू

Answer 5

मैं अमल करने का सुझाव दूंगा

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

जैसा कि आप जानते होंगे,

php bin/magento setup:upgrade

कैश और स्थिर सामग्री को साफ करेगा, और

php bin/magento setup:static-content:deploy 

<mageroot>/pubफ़ोल्डर में सभी विषयों को तैनात करेगा । यह कमांड आपके स्टोर के पहले लोड को काफी कम कर देगा।