ความแตกต่างระหว่าง _module.less และ _extend.less

มีความแตกต่างระหว่างการขยายธีมโดยใช้_module.lessและ_extend.less? และวิธีปฏิบัติที่ดีที่สุดเมื่อขยายโมดูล / ชุดรูปแบบคืออะไร

ความคิดแรกของฉันคือการใช้ที่ดีกว่า_module.lessเมื่อจัดแต่งโมดูลใหม่และ_extend.lessเมื่อขยายโมดูล แต่ Luma ใช้_module.lessเมื่อขยายธีมว่างเพื่อที่ว่าทฤษฎีได้ออกไปนอกหน้าต่าง

ความแตกต่างเดียวที่ฉันเห็นระหว่างพวกเขาจะ_module.lessถูกนำเข้าก่อนไลบรารีการตอบสนองและ_theme.lessตำแหน่งที่_extend.lessจะถูกนำเข้าหลังจากพวกเขา

นี่คือคำสั่งที่พวกเขาจะนำเข้า vendor/magento/theme-frontend-blank/web/css/styles-l.less

//
//  Blank theme desktop styles
//  _____________________________________________

//  These desktop styles are added to mobile

//
//  Global lib + theme styles
//  ---------------------------------------------

@import '_styles.less';
@import (reference) 'source/_extends.less';

//
//  Magento Import instructions
//  ---------------------------------------------

//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets

//
//  Media queries collector
//  ---------------------------------------------

@import 'source/lib/_responsive.less';

@media-target: 'desktop'; // Sets target device for this file
@media-common: false; // Sets not to output common styles

//
//  Global variables override
//  ---------------------------------------------

@import 'source/_theme.less';

//
//  Extend for minor customisation
//  ---------------------------------------------

//@magento_import 'source/_extend.less';

คำตอบนั้นถูกซ่อนอยู่ในเอกสาร Magento:

การขยายธีมโดยใช้_extend.lessเป็นตัวเลือกที่ง่ายที่สุดเมื่อคุณพอใจกับทุกสิ่งที่ธีมหลักมี แต่ต้องการเพิ่มสไตล์เพิ่มเติม

อ่านเพิ่มเติมได้ที่นี่

ใช้_module.lessเมื่อคุณต้องการทำการเปลี่ยนแปลงที่สำคัญในสไตล์สำหรับโมดูลและใช้_extend.lessสำหรับการปรับเปลี่ยนเล็กน้อย คุณจะพบตัวอย่างเพิ่มเติมเกี่ยวกับวิธีการแทนที่สไตล์ส่วนประกอบในลิงค์ด้านบน

คำอธิบายหรือความแตกต่างง่าย ๆ ระหว่างทั้งสอง:

_extend.lessเป็นวิธีที่จะขยาย / แก้ไขสไตล์ของธีมหลักเช่นคุณมีความสุขกับธีมหลักของคุณLumaและเพียงต้องการเปลี่ยนรูปแบบปุ่มในธีมที่คุณกำหนดเองสิ่งที่คุณต้องทำคือสร้างไฟล์ใหม่_buttons_extend.lessภายใต้web/css/sourceในธีมที่คุณกำหนดเองและ ปรับสไตล์ในนั้น ลงทะเบียนไฟล์นี้โดยเพิ่มลงใน_extend.lessไฟล์ในไดเรกทอรีธีมของคุณ

จะทำอย่างไรถ้าคุณต้องการขยายสไตล์ของโมดูลเช่นโมดูลชำระเงินคุณสามารถสร้าง_extend.lessไฟล์ในโฟลเดอร์โมดูลธีมของคุณเช่นMagento_Checkout/web/css/source/_extend.lessและเพิ่ม / ขยายสไตล์โมดูลในนั้น

ตอนนี้ถ้าฉันเพิ่ม_module.lessไฟล์ในไดเรกทอรีโมดูลของMagento_Checkout/web/css/source/_module.lessฉันฉันตั้งใจจะแทนที่สไตล์แม่แบบของฉันสำหรับโมดูลนี้ซึ่งในกรณีนี้ฉันต้องคัดลอก_module.lessไฟล์ '' จากไดเรกทอรีโมดูลของธีมหลักของฉันและทำการแก้ไขไฟล์นั้นในกรณีนี้ไฟล์นี้จะ แทนที่_module.lessไฟล์ธีมหลักโดยสิ้นเชิง

_extends.lessกับ S ณ สิ้นภายในธีมที่ว่างเปล่าเป็นไฟล์ที่พวกเขาสร้างขึ้นทุกชั้นเรียนที่สามารถขยายได้ผ่านLESSต่อมาภายในรูปแบบโดยไม่จำเป็นต้องของการสร้างองค์ประกอบใหม่หรือโครงสร้างแบบแยกส่วนสำหรับการเปลี่ยนแปลงรูปแบบ -> สำหรับผู้ที่ไม่เชื่อฉัน: https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.lessตรวจสอบ ไฟล์.

การ_extend.lessไม่มีตัว S ในตอนท้ายคือเมื่อคุณมีความสุข 99% กับสิ่งที่ธีมหลักมีและคุณเพียงแค่ต้องเปลี่ยนสิ่งต่าง ๆ เปลี่ยนสไตล์และนั่นคือสิ่งที่คุณต้องการ

เกี่ยวกับความคิดเห็นส่วนตัวของฉันอย่าใช้เพื่อการพัฒนาของคุณเอง มันสร้างความยุ่งเหยิงครั้งใหญ่ในภายหลัง รักษาโครงสร้างโมดูลาร์ของคุณไว้กับ_module.lessทุกโมดูลที่คุณต้องการปรับแต่งและคุณจะได้ผลลัพธ์ที่ดีขึ้นและบำรุงรักษาโครงการได้ในตอนท้าย