การวางตำแหน่ง / สั่งซื้อไฟล์ CSS ใน Magento 2 เป็นวิธีที่เหมาะสมอย่างไร

14

ในMagento 2 DevDocมันบอกว่า

หากต้องการรวมไฟล์ CSS ให้เพิ่มส่วน <css src = "<path> / <file>" media = "print | <option>" /> ในส่วน <head> ในไฟล์เลย์เอาต์

อย่างไรก็ตามมันไม่ได้บอกว่าเราจะมีอิทธิพลต่อลำดับของไฟล์ CSS ของเราได้อย่างไร และถ้าเราเพิ่มไฟล์ CSS ด้วยวิธีนี้ในธีมที่กำหนดเองซึ่งมีธีมหลักผลก็คือไฟล์จะถูกเพิ่มที่ส่วนบนของส่วน <head> พร้อมกับไฟล์ CSS อื่น ๆ จำนวนมากด้านล่างหมายความว่าลำดับความสำคัญของพวกเขาค่อนข้างมาก ต่ำและเราไม่สามารถแทนที่กฎได้อย่างง่ายดายจากธีมหลักหรือส่วนขยาย

มีปัญหาคล้ายกันใน Magento 1 และมีวิธีแก้ไขเฉพาะหน้า บางคนทำความสะอาดมากกว่าคนอื่นน้อย
วิธีที่ดีที่สุดในการสั่งซื้อไฟล์ CSS ของธีมที่กำหนดเองที่ด้านล่างของ <head> ใน Magento 2 คืออะไรถ้าเป็นไปได้ให้ปฏิบัติตามแนวทางการจัดวาง Magento 2 สำหรับธีมที่กำหนดเอง

— Jey DWork
แหล่งที่มา

14

Magento2 ไม่มีกลไกในตัวสำหรับเรื่องนี้ดังนั้นฉันตัดสินใจที่จะปฏิบัติต่อมันเป็นโอกาสที่จะเขียนส่วนขยาย Magento2 ครั้งแรกของฉัน ขยาย Quickshiftin \ Assetordererคือตอนนี้ที่มีอยู่บน GitHub!

เมื่อคุณติดตั้งส่วนขยายแล้วคุณสามารถระบุแอตทริบิวต์คำสั่งซื้อในแท็กcss XML ของคุณ

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

นอกจากนี้คุณยังสามารถใช้เพื่อแอตทริบิวต์ในรูปแบบไฟล์ XML default_head_blocks.xmlเช่น แท็กcssใด ๆ ที่คุณไม่ได้ระบุคำสั่งซื้อจะได้รับการปฏิบัติเสมือนว่าพวกเขามีลำดับ 1

— quickshiftin
แหล่งที่มา

ขอบคุณมาก. ส่วนขยายของคุณใช้ได้สำหรับฉัน แต่ประสบปัญหาสองประการข้อหนึ่งใน di.xml และอีกประเด็นหนึ่งใน Quickshiftin \ Assetorderer \ View \ Asset \ File

— Pankaj Pareek

สวัสดี @PanajPareek นั่นเป็นข่าวดีและไม่ดี โอกาสใดที่คุณสามารถอธิบายรายละเอียดเกี่ยวกับ GitHub และอาจมีส่วนร่วมในคำขอดึง? มันเป็นการดีที่จะทำให้ส่วนขยายมีประโยชน์สำหรับทุกคน!

— quickshiftin

@quickshiftin ส่วนขยายนี้ใช้งานได้ใน v2.0 แต่ไม่ใช่ v2.1.1 อย่างไรก็ตามฉันพบโดยบังเอิญว่าไม่จำเป็นต้องใช้ใน v2.1.1 อีกต่อไปเพราะเมื่อฉันเพิ่มorder="1"ไฟล์จะได้รับคำสั่งอย่างถูกต้อง ไม่สำคัญว่าคุณลักษณะจะเป็นอย่างไรตราบใดที่คุณเพิ่มแอตทริบิวต์เพิ่มเติม ในการตรวจสอบความถูกต้องคุณสามารถเปลี่ยนเป็นdata-order="1"และยังใช้งานได้

— thdoan

สั่งงานสำหรับไฟล์ js ด้วย

— Jalpesh Patel

@quickshiftin คุณอัปเดตโมดูลของคุณสำหรับ M2.2.2 แล้ว

— PЯINCƏ

7

คุณสามารถเพิ่มmediaคุณสมบัติให้กับองค์ประกอบ CSS จะเพิ่มลงในส่วนท้ายของ CSS ที่รวมไว้ทั้งหมดในส่วนหัว

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

— andyace
แหล่งที่มา

ถ้าฉันต้องการมันก่อน

— TheBlackBenzKid

สิ่งนี้จะยังคงโหลด CSS แบบกำหนดเองก่อนไฟล์หลัก CSS หลัก 2 แกน :(

— Jonathan Marzullo

ในฐานะของ M2.2.1 มันเป็นทางออกเดียวที่ทำงานสำหรับฉัน การเพิ่ม 'order = "X"' ไปยังโหนด <css> ทำให้เกิดข้อผิดพลาดเนื่องจากไม่อนุญาตให้ใช้คุณลักษณะนี้

— Dynomite

2

ฉันตอบในรายละเอียดที่นี่เกี่ยวกับวิธีที่วีโอไอพีสร้างการแสดงผลและวิธีการสั่งซื้อที่เกิดขึ้นเบื้องหลัง

บางจุดพิเศษที่ฉันต้องพูดถึงคือ:

หากคุณต้องการที่จะทำให้ไฟล์ CSS ที่กำหนดเองของคุณหลังจากที่style-m.cssและstlyle-l.cssแล้วคุณจะต้องกำหนดไฟล์ CSS ของคุณเช่นด้านล่าง:
```
<css src="Magento_Theme:css/path/file.css" media="all" />
```
หากคุณต้องการที่จะโหลดไฟล์ CSS ที่กำหนดเองของคุณก่อน style-m.cssและstlyle-l.cssจากนั้นคุณต้องรวมไฟล์ CSS ของคุณผ่านทางไฟล์รูปแบบของ XML default_head_blocks.xmlและเพิ่มไฟล์ CSS ที่กำหนดเองของคุณด้านบนและstyle-m.cssstlyle-l.css
คุณสมบัติ CSS นั้น จำกัด และมีการกำหนดไว้อย่างดีในโครงร่างเค้าโครง จากสคีมาโครงร่างคุณสามารถใช้คุณสมบัติต่อไปนี้ในไฟล์ 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 ในไฟล์เลย์เอาต์ XML ของคุณ คุณจะได้รับข้อยกเว้นซึ่งบ่งชี้ว่าการตรวจสอบความถูกต้องของสคีมาล้มเหลว

— Rajeev K Tomy
แหล่งที่มา

1

คุณสามารถทำให้กฎ CSS ของคุณมีความสำคัญมากกว่ากฎ CSS หลักได้โดยการเพิ่มหรือลบตัวเลือกพาเรนต์เพิ่มเติม
ตัวอย่างเช่นลองดูกฎ CSS ตัวอย่างในแกนกลาง:

.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(แต่แน่นอนว่าวิธีการของคุณยังดีกว่านั้น) หรือใช้คลาสคำนำหน้าผู้ขายด้วยน้อย สิ่งนี้ยังช่วยเพิ่มค่าใช้จ่ายและความซับซ้อนที่ไม่จำเป็น ทำไมต้องนำหน้ากฎหลายร้อยกฎขึ้นไปเมื่อมีการเปลี่ยนแปลงคำสั่งง่ายๆของ CSS? ดังนั้นฉันยังคงมองหาวิธีที่ดีในการแก้ปัญหานี้ในด้าน Magento ...

— Jey DWork

นอกจากนี้เมื่อมันมาถึงทรัพยากรอื่น ๆ นอกเหนือจากการวางตำแหน่ง CSS อาจมีความสำคัญมากกว่าเนื่องจากการแก้ไขปัญหาอาจทำให้เกิดความอัปลักษณ์ได้

— Jey DWork

6

นั่นไม่ใช่คำตอบ

— Ahmad Alfy