Magento 2 এ সিএসএস ফাইলগুলি অবস্থানের / অর্ডার করার সঠিক উপায় কী?

14

ইন Magento 2 DevDoc এটা বলে

একটি সিএসএস ফাইল অন্তর্ভুক্ত করতে, একটি লেআউট ফাইলের <হেডএস বিভাগে <সিএসএস এসসিআর = "<path> / <file>" মিডিয়া = "মুদ্রণ | <option>" /> ব্লক যুক্ত করুন।

তবে এটি আমাদের সিএসএস ফাইলগুলির ক্রমকে কীভাবে প্রভাবিত করতে পারে তা বলে না। এবং যদি আমরা এইভাবে একটি কাস্টম থিমটিতে সিএসএস ফাইল যুক্ত করি যার মূল পিতা থিম থাকে ফলাফলটি হ'ল <হেড> বিভাগের শীর্ষে অনেকগুলি সিএসএস ফাইলের নীচে ফাইলগুলি যুক্ত করা হয় যার অর্থ তাদের অগ্রাধিকারটি বেশ কম এবং আমরা প্যারেন্ট থিম বা এক্সটেনশানগুলি থেকে নিয়মগুলিকে সহজেই ওভাররাইড করতে পারি না।

ম্যাজেন্টো 1 এ একই রকম সমস্যা ছিল এবং সেখানে কর্মক্ষেত্র ছিল। কিছু অন্যদের চেয়ে কম পরিচ্ছন্ন ছিল।
ম্যাজেন্টো 2 তে <হেড> নীচে একটি কাস্টম থিমের সিএসএস ফাইল অর্ডার করার সর্বোত্তম উপায় কী - যদি সম্ভব হয় তবে কাস্টম থিমগুলির জন্য ম্যাজেন্টো 2 লেআউট নির্দেশিকা মেনে চলা?

— জে ডি ওয়ার্ক
সূত্র

14

Magento2 এর কোনও বিল্ট-ইন মেকানিজম নেই তাই আমি এটিকে আমার প্রথম Magento2 এক্সটেনশন লেখার সুযোগ হিসাবে বিবেচনা করার সিদ্ধান্ত নিয়েছি। Quickshiftin \ Assetorderer এক্সটেনশন এখন GitHub থেকে পাওয়া যায়!

একবার আপনি এক্সটেনশন ইনস্টল হয়ে গেলে আপনি আপনার সিএসএস এক্সএমএল ট্যাগগুলিতে একটি অর্ডার বৈশিষ্ট্য নির্দিষ্ট করতে পারেন ।

<head>
  <css src="css/page/home.css" order="100"/>
</head>

আপনি যেমন লেআউট এক্সএমএল ফাইলগুলিতে অর্ডার বৈশিষ্ট্যটিও ব্যবহার করতে পারেন default_head_blocks.xml। আপনি যে কোনও সিএসএস ট্যাগের জন্য কোনও অর্ডার নির্দিষ্ট করেননি এমন আচরণ করা হয় যেন তাদের 1 এর অর্ডার থাকে ।

— quickshiftin
সূত্র

অনেক ধন্যবাদ. আপনার এক্সটেনশনটি আমার পক্ষে কাজ করেছিল। তবে দুটি সমস্যার মুখোমুখি হলেন একটি ডি.এক্সএমএল এবং একটি কুইকশিফটিন-এসেটর্ডারার \ দেখুন \ সংস্থান \ ফাইল শ্রেণিতে issues

— পঙ্কজ পরিক

হাই @ পঙ্কজপরিখ, এটি ভাল খবর এবং খারাপ bad গিটহাবের উপর আপনি যে কোনও সুযোগটি বিশদভাবে বর্ণনা করতে পারেন এবং সম্ভবত একটি অনুরোধের জন্য অবদান রাখতে পারেন? সবার জন্য এক্সটেনশানটি কার্যকর করা ভাল লাগবে!

— কুইকশিফটিন

@ কুইকশিফটিন এই এক্সটেনশনটি v2.0 এ কাজ করেছে, তবে ভি 2.1.1 এ নয়। যাইহোক, আমি সুযোগে খুঁজে পেয়েছি যে এটি আর v2.1.1 এর প্রয়োজন নেই কারণ আমি যুক্ত order="1"করার পরে ফাইলটি সঠিকভাবে অর্ডার হয়ে যায়। যতক্ষণ আপনি অতিরিক্ত গুণাবলী যুক্ত করবেন ততক্ষণ এট্রিবিউটটি কী তা বিবেচ্য নয়। এটি বৈধ করার জন্য, আপনি এটিকে পরিবর্তন করতে পারেন data-order="1"এবং এটি এখনও কার্যকর হবে।

— thdoan

জেএস ফাইলের জন্য অর্ডার কাজ।

— জলপেশ প্যাটেল 5'17

@ কুইকশিফ্টিন আপনি এমডি ২.২.২

— পেনসিƏ

7

আপনি mediaসিএসএস উপাদানটিতে বৈশিষ্ট্য যুক্ত করতে পারেন । এটি এটিকে মাথায় অন্তর্ভুক্ত সমস্ত সিএসএসের শেষে যুক্ত করবে।

<head>
    <css src="css/styles.css" media="all" />
</head>

— andyace
সূত্র

আমি যদি প্রথমে এটি চাই?

— দ্য

এটি এখনও প্রধান ম্যাজেন্টো 2 কোর সিএসএস ফাইলগুলির আগে কাস্টম সিএসএস লোড করবে :(

— জোনাথন মারজুলো

M2.2.1 হিসাবে এটি আমার পক্ষে কাজ করা একমাত্র সমাধান। এই আদেশটি অনুমোদিত না হওয়ায় <আদেশ> নোডে 'অর্ডার = "এক্স" যুক্ত করা একটি ত্রুটি নিক্ষেপ করুন।

— ডাইনোমাইট

2

আমি কীভাবে ম্যাজেন্টো সিএসএস রেন্ডার করে এবং কীভাবে দৃশ্যের পিছনে ক্রম ঘটছে তা সম্পর্কে আমি এখানে বিশদে উত্তর দিয়েছিলাম ।

আমার এখানে অতিরিক্ত কিছু বিষয় উল্লেখ করতে হবে যা হ'ল:

আপনি যদি নিজের কাস্টম সিএসএস ফাইলটি পরে style-m.cssএবং রেন্ডার করতে চান stlyle-l.cssতবে আপনাকে নীচের মতো আপনার সিএসএস ফাইলটি সংজ্ঞায়িত করতে হবে:
```
<css src="Magento_Theme:css/path/file.css" media="all" />
```
আপনি যদি নিজের কাস্টম সিএসএস ফাইলটি আগে style-m.cssএবং আগে লোড করতে চান stlyle-l.cssতবে আপনাকে আপনার সিএসএস ফাইলটি লেআউট এক্সএমএল ফাইলের মাধ্যমে অন্তর্ভুক্ত করতে হবে default_head_blocks.xmlএবং উপরে style-m.cssএবং আপনার কাস্টম সিএসএস ফাইল যুক্ত করতে হবে stlyle-l.css।
সিএসএসের বৈশিষ্ট্যগুলি সীমাবদ্ধ এবং লেআউট স্কিমে ভালভাবে সংজ্ঞায়িত। লেআউট স্কিমা অনুযায়ী, আপনি আপনার সিএসএস ফাইলে নিম্নলিখিত বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন।

ফাইল: vendor/magento/framework/View/Layout/etc/head.xsd
```
<xs:complexType name="linkType">
    <xs:attribute name="src" type="xs:string" use="required"/>
    <xs:attribute name="defer" type="xs:string"/>
    <xs:attribute name="ie_condition" type="xs:string"/>
    <xs:attribute name="charset" type="xs:string"/>
    <xs:attribute name="hreflang" type="xs:string"/>
    <xs:attribute name="media" type="xs:string"/>
    <xs:attribute name="rel" type="xs:string"/>
    <xs:attribute name="rev" type="xs:string"/>
    <xs:attribute name="sizes" type="xs:string"/>
    <xs:attribute name="target" type="xs:string"/>
    <xs:attribute name="type" type="xs:string"/>
    <xs:attribute name="src_type" type="xs:string"/>
</xs:complexType>
```
এর সহজ অর্থ হল orderআপনার লেআউট এক্সএমএল ফাইলে CSS সংজ্ঞা সহ আপনি বা অন্য কোনও বৈশিষ্ট্য ব্যবহার করতে পারবেন না । এটি করার মাধ্যমে, আপনি একটি ব্যতিক্রম পাবেন যা স্কিমা বৈধতা ব্যর্থতার নির্দেশ করে।

— রাজীব কে তোমী
সূত্র

1

অতিরিক্ত পিতা বা মাতা নির্বাচককে যোগ করে বা মুছে ফেলে আপনি মূল সিএসএস বিধিগুলির তুলনায় আপনার সিএসএস বিধিগুলি কম বা বেশি গুরুত্বপূর্ণ করতে পারেন।
উদাহরণস্বরূপ, আসুন মূলটিতে একটি নমুনা সিএসএস নিয়মটি দেখুন:

.cart.table-wrapper .item .col.item {
    padding: 20px 8px 20px 0;
}

পিতামাতার নির্বাচক যুক্ত করে আপনি আপনার কাস্টম বিধিটিকে আরও গুরুত্বপূর্ণ করতে পারেন, উদাহরণস্বরূপ:

body .cart.table-wrapper .item .col.item {
    padding: 10px 8px 20px 0;
}

অথবা

body .cart.table-wrapper .item td.col.item {
    padding: 10px 8px 20px 0;
}

পিতামাতার নির্বাচককে অপসারণ করে আপনি আপনার কাস্টম বিধিটিকে কম গুরুত্বপূর্ণ করতে পারেন, উদাহরণস্বরূপ:

.item td.col.item {
    padding: 30px 8px 20px 0;
}

— Mage2.PRO
সূত্র

3

অবশ্যই এবং আমি খুব সহজেই ধাক্কা মারতে পারি !important(তবে অবশ্যই আপনার পদ্ধতির তুলনায় এটি এখনও আরও ভাল) বা কম সহ একটি বিক্রেতা উপসর্গ ক্লাস বাস্তবায়ন করতে পারে। তবুও এটি অপ্রয়োজনীয় ওভারহেড এবং জটিলতা যুক্ত করে। সিএসএসের কোনও সাধারণ ক্রম পরিবর্তন যখন এটি করবে তখন কেন কয়েকশ বা আরও বেশি বিধিগুলির উপসর্গ করা হচ্ছে? সুতরাং আমি এখনও ম্যাজেন্টো

— পক্ষেই

সিএসএসের অবস্থানের তুলনায় অন্যান্য সংস্থাগুলির ক্ষেত্রে এটি আরও গুরুত্বপূর্ণ হয়ে উঠতে পারে কারণ কাজের ক্ষেত্রগুলি আরও কৃপণ হতে পারে।

— জে ডিওয়ার্ক

6

এটি কোনও উত্তর নয়

— আহমদ আলফাই