Sự khác biệt giữa _module.less và _extend.less


22

Có sự khác biệt nào giữa việc mở rộng một chủ đề bằng cách sử dụng _module.less_extend.lesskhông? Và thực hành tốt nhất khi mở rộng một mô-đun / chủ đề là gì?

Suy nghĩ đầu tiên của tôi là sử dụng tốt hơn _module.lesskhi tạo kiểu cho một mô-đun mới và _extend.lesskhi mở rộng một mô-đun. Nhưng Luma sử dụng _module.lesskhi mở rộng chủ đề trống để lý thuyết đã biến mất khỏi cửa sổ.

Sự khác biệt duy nhất tôi có thể thấy giữa chúng là _module.lessđược nhập trước thư viện responsive và _theme.lessnơi _extend.lessđược nhập sau chúng.

Đây là thứ tự họ được nhập khẩu 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';

Câu trả lời:


20

Câu trả lời có phần bị ẩn trong các tài liệu Magento:

Mở rộng một chủ đề bằng cách sử dụng _extend.less là tùy chọn đơn giản nhất khi bạn hài lòng với mọi thứ mà chủ đề gốc có, nhưng muốn thêm nhiều kiểu hơn.

Đọc thêm tại đây

Sử dụng _module.less khi bạn muốn thực hiện các thay đổi lớn về kiểu dáng cho mô-đun và sử dụng _extend.less cho các điều chỉnh nhỏ. Bạn sẽ tìm thấy nhiều ví dụ về cách ghi đè các kiểu thành phần trong liên kết ở trên.


1
Tôi đã đọc nó nhưng nó không thực sự giải thích tại sao, có vẻ như không có lý do đằng sau nó. Tôi đang cố gắng tìm hiểu xem có sự khác biệt nào không. Tôi đã sử dụng _extend.less cho tất cả các thay đổi của mình vì tôi thích sự nhất quán hơn khi sử dụng thứ gì đó vì 'Magento đã nói như vậy'.
Ben Crook

1
@BenCrook nếu tôi đọc những ngày vừa qua phục vụ tôi đúng, không. Nếu ai đó đã thêm bất kỳ .lesstệp nào trong chủ đề của họ có cùng đường dẫn với một tệp trong chủ đề / mô-đun gốc, thì đó là ghi đè. Bạn có thể có thể xác minh bằng cách tạo một _module.less trống vào chủ đề của mình và xem các kiểu ban đầu có áp dụng không.
Darren Felton

1
Sau một php bin/magento setup:static-content:deploy, bạn có thể xem xét pub/static/frontend/<vendor>/<themeName>/<locale>/css/pub/static/frontend/<vendor>/<themeName>/<locale>/<Module_Name>/css/sẽ có các liên kết tượng trưng cho các tệp * .less đến chủ đề của bạn hoặc chủ đề mô-đun / phụ huynh mà nó đến từ.
Darren Felton

1
Đó là chính xác _module.less ghi đè tập tin cha mẹ ít hơn, không có sự kế thừa hoặc hợp nhất. Tôi nhận ra rằng tôi có thể đã nói rõ hơn trong câu trả lời ban đầu của mình :)
c.norin

1
@MattCosentino Tôi nhận ra câu trả lời này đến rất muộn, nhưng tôi sẽ để nó ở đây trong trường hợp ai đó vấp phải nó: Xin lưu ý sự khác biệt giữa _extends.less và _extend.less. Các tệp _extend.less có thể được thêm vào bất kỳ bối cảnh mô-đun nào, để mở rộng các kiểu từ chủ đề gốc. _Textends.less nằm trong thư mục gốc của chủ đề và được sử dụng để mở rộng các tiện ích hiện có (tham khảo <project> /lib/web/css/docs/source/_utilities.less).
c.norin

3

Giải thích đơn giản hoặc khác biệt giữa cả hai:

_extend.lesslà cách để mở rộng / sửa đổi theme mẹ phong cách ví dụ bạn hài lòng với chủ đề cha mẹ của bạn Luma và chỉ muốn thay đổi phong cách nút trong chủ đề tùy chỉnh của bạn, tất cả các bạn cần làm là tạo một file mới _buttons_extend.lessdưới web/css/sourcetrong chủ đề tùy chỉnh của bạn và điều chỉnh phong cách trong đó. Đăng ký tập tin này bằng cách thêm nó vào _extend.lesstập tin trong thư mục chủ đề của bạn.

Điều gì sẽ xảy ra nếu bạn muốn mở rộng các kiểu của một mô-đun, ví dụ như mô-đun thanh toán, bạn có thể tạo một _extend.lesstệp trong thư mục mô-đun chủ đề của mình, ví dụ Magento_Checkout/web/css/source/_extend.lessvà thêm / mở rộng kiểu dáng mô-đun trong đó.

Bây giờ nếu tôi đã thêm _module.lesstệp trong thư mục mô-đun của mình, Magento_Checkout/web/css/source/_module.lesstôi dự định ghi đè lên kiểu chủ đề gốc của mình cho mô-đun này trong trường hợp tôi cần sao chép _module.lesstệp '' từ thư mục mô-đun của chủ đề cha mẹ và sửa đổi tệp đó trong trường hợp tệp này sẽ thay thế _module.lesstập tin chủ đề cha mẹ hoàn toàn.


Anh ấy không bao giờ nói về Luma như một bậc cha mẹ.
Ezequiel Alba

1

Chữ _extends.lessS ở cuối trong Chủ đề trống, là tệp mà họ đã tạo tất cả các lớp có thể được mở rộng LESSsau này trong chủ đề mà không cần tạo các thành phần mới hoặc cấu trúc mô đun để thay đổi kiểu. -> Dành cho những ai không tin tôi: https://github.com/magento/magento2/blob/2.3-develop/app/design/frontend/Magento/blank/web/css/source/_extends.less kiểm tra tập tin.

Không _extend.lesscó chữ S ở cuối, là khi bạn hài lòng 99% với chủ đề phụ huynh có và bạn chỉ cần thay đổi một vài thứ, thay đổi một số kiểu dáng và đó là nó.

Về ý kiến ​​sau, ý kiến ​​cá nhân của tôi, không sử dụng nó cho sự phát triển của riêng bạn. Nó tạo ra một mớ hỗn độn lớn về sau. Giữ cấu trúc của bạn theo mô-đun _module.lesscho mọi mô-đun bạn muốn tùy chỉnh và bạn sẽ nhận được kết quả tốt hơn & dự án duy trì vào cuối.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.