วิธีที่ดีที่สุดในการขยายโมดูลที่พบน้อยลงในเว็บ / css / source / module เช่น _minicart.less?

วิธีใดเป็นวิธีที่ดีที่สุดในการขยายเนื้อหาไฟล์ให้น้อยลง<module>/web/css/source/module/เช่นMagento_Checkout/web/css/source/module/_minicart.less?

สมมติว่า

A) OVERRIDE

1. ธีมที่เกี่ยวข้องน้อยกว่าคุณจะต้องสร้าง (หรือคัดลอก) ธีมที่มีชื่อเดียวกันของธีมหลักและวางไว้ในธีมของคุณเช่นนี้theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
2. เฉพาะโมดูลน้อยคุณต้องสร้าง (หรือคัดลอก) น้อยกว่าด้วยชื่อเดียวกันของธีมหลักและวางไว้ในชุดรูปแบบของคุณเช่นนี้theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
3. UI lib น้อยลงคุณต้องสร้าง (หรือคัดลอก) น้อยลงด้วยเนื้อหาชื่อเดียวกันในโฟลเดอร์ไลบรารีและวางในธีมของคุณเช่นนี้magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

และ

B) ขยาย

1. ธีมที่เกี่ยวข้องน้อยลงคุณต้องสร้างไฟล์ _extend.less ในธีมของคุณเพิ่ม_extendในชื่อเช่นนี้<your-theme>/web/css/source/_navigation_extend.lessเพื่อขยายtheme-frontend-blank/web/css/source/_navigation.lessและลงทะเบียนไฟล์นั้นด้วยคำสั่ง@importใน _extend.less ของเนื้อหาธีมในเว็บ / css / source ->@import "_navigation_extend.less"
2. เฉพาะโมดูลน้อยคุณต้องสร้างไฟล์ _extend.less ในพา ธ โมดูลธีมของคุณเช่นนี้<your-theme>Magento_CatalogSearch/web/css/source/_extend.lessซึ่งขยาย Magento_CatalogSearch original _module.less
3. UI lib น้อยลงคุณต้องสร้างน้อยด้วยเนื้อหาชื่อเดียวกันในโฟลเดอร์ไลบรารีเพิ่ม_extendในชื่อเช่นนี้<your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.lessเพื่อขยายmagento2-base/lib/web/css/source/lib/_buttons.lessและลงทะเบียนไฟล์ที่มีคำสั่ง@importใน _extend.less ของเนื้อหาธีมในเว็บ / css / แหล่งที่มา - >@import "lib/_buttons_extend.less"

ทฤษฎีต้องแนะนำให้คุณสร้าง _minicart_extend.less แต่จะไม่ทำงานโดยอัตโนมัติ บางทีคุณควรนำเข้าไฟล์นั้นใน _extend.less ของโมดูลนั้นตามที่อธิบายไว้ใน B1 หรือ B3?

และทำไมส่วนประกอบเหล่านี้ที่ขยายน้อยลงไม่รวมอยู่ในการแยกวิเคราะห์ css โดยอัตโนมัติหากนี่เป็นวิธีที่ถูกต้องในการขยาย แต่ต้องนำเข้าใน _extend.less

(ที่นี่ยังมีอีกคำถามหนึ่ง: อะไรคือความแตกต่างระหว่างweb/css/source/lib/_buttons.lessและweb/css/source/_buttons.less? 😕)

ฉันสับสนเล็กน้อย หวังว่าจะมีคนช่วยฉันได้

ขออภัยสำหรับข้อความยาวนี้

แหล่งที่มา:

• http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

• http://inchoo.net/magento-2/working-with-css-in-your-first-magento-2-project/comment-page-1/#comment-434125

ตามระเบียบของ Magento 2 วิธีที่ดีที่สุดในการขยายรูปแบบของโมดูลมีดังนี้:

ถ้าเราต้องการขยายสไตล์จากMagento_Checkout/web/css/source/module/_minicart.lessเราต้องมี 2 ไฟล์

• <your-theme>/Magento_Checkout/web/css/source/_extend.lessที่ที่เราจะนำเข้าส่วนขยายที่กำหนดเองของเรา ในกรณีนี้@import "_minicart_extend.less"

• <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less ที่จะมีสไตล์ที่กำหนดเองของเรา

เหตุผลที่เราต้องการ_extend.lessไฟล์เพื่อระบุว่า@importsเป็นเพราะวีโอไอพีรวมเฉพาะ_extend.lessต่อโมดูลโดยอัตโนมัติ การตรวจสอบและเพิ่มทั้งหมด*_extend.lessโดยอัตโนมัติจะใช้เวลานานและนั่นคือสาเหตุที่มันไม่ถูกนำไปใช้เช่นนั้น

ในไฟล์ธีม Magento Blank ที่รับผิดชอบมินิมาร์ทอยู่ใน /vendor/magento/theme-frontend-blank/Magento_Checkout/

_extend.lessนอกจากนี้เรายังสามารถเพิ่มรูปแบบที่กำหนดเองทั้งหมดของเราโดยตรง อย่างไรก็ตามการแยกไฟล์เหล่านี้ออกเป็นไฟล์ขนาดเล็กลงและมีความเฉพาะเจาะจงเช่นในโมดูลดั้งเดิมจะช่วยให้รหัสนั้นชัดเจนและจัดระเบียบได้ดีขึ้น นั่นเป็นวิธีที่แนะนำตามมาตรฐาน Magento 2