Cách tốt nhất để mở rộng mô-đun ít được tìm thấy trong web / css / source / mô-đun, như _minicart.less?

Đó là cách tốt nhất để mở rộng ít nội dung tệp hơn <module>/web/css/source/module/, ví dụ như Magento_Checkout/web/css/source/module/_minicart.less?

Giả sử rằng

A) TỔNG QUAN

1. chủ đề ít liên quan hơn, bạn phải tạo (hoặc sao chép) ít hơn với cùng tên của chủ đề gốc và đặt nó vào chủ đề của bạn như thế này theme-frontend-blank/web/css/source/_buttons.less-><your-theme>/web/css/source/_buttons.less
2. mô-đun cụ thể ít hơn bạn phải tạo (hoặc sao chép) ít hơn với cùng tên của chủ đề gốc và đặt nó trong chủ đề của bạn như thế này theme-frontend-blank/Magento_Theme/web/css/source/_module.less-><your-theme>Magento_Theme/web/css/source/_module.less
3. UI ít hơn bạn phải tạo (hoặc sao chép) ít hơn với cùng một nội dung tên trong thư mục thư viện và đặt nó trong chủ đề của bạn như thế này magento2-base/lib/web/css/source/lib/_buttons.less-><your-theme>Magento_Theme/web/css/source/lib/_buttons.less

và để

B) NGOẠI TRỪ

1. ít liên quan đến chủ đề, bạn phải tạo tệp _extend.less trong chủ đề của mình, thêm _extend vào tên như thế này <your-theme>/web/css/source/_navigation_extend.lessđể mở rộng theme-frontend-blank/web/css/source/_navigation.lessVÀ đăng ký tệp đó bằng lệnh @import trong _extend.less của nội dung chủ đề trong web / css / source ->@import "_navigation_extend.less"
2. ít cụ thể hơn mô-đun, bạn phải tạo tệp _extend.less trong đường dẫn mô-đun chủ đề của mình như thế này <your-theme>Magento_CatalogSearch/web/css/source/_extend.lessđể mở rộng Magento_CatalogSearch gốc _module.less
3. UI lib ít hơn, bạn phải tạo ít hơn với cùng một nội dung tên trong thư mục thư viện thêm _extend vào tên như thế này <your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.lessđể mở rộng magento2-base/lib/web/css/source/lib/_buttons.lessVÀ đăng ký tệp đó bằng lệnh @import trong _extend.less của nội dung chủ đề trong web / css / source - >@import "lib/_buttons_extend.less"

Lý thuyết phải đề nghị bạn tạo một _minicart_extend.less nhưng nó không tự động hoạt động. Có lẽ bạn nên nhập tệp đó trong _extend.less của mô-đun đó như được giải thích trong B1 hoặc B3?

Và tại sao các thành phần mở rộng ít hơn không được tự động đưa vào phân tích cú pháp của css nếu đây là cách chính xác để mở rộng chúng nhưng phải được nhập trong _extend.less?

(Ở đây cũng có một câu hỏi khác: sự khác biệt giữa web/css/source/lib/_buttons.lessvà web/css/source/_buttons.less? 😕)

Tôi hơi bối rối. Hy vọng ai đó có thể giúp tôi.

Xin lỗi cho văn bản dài này.

Nguồn:

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

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

Theo quy ước Magento 2, cách tốt nhất để mở rộng các kiểu mô-đun như sau:

Nếu chúng tôi muốn mở rộng kiểu từ Magento_Checkout/web/css/source/module/_minicart.lesschúng tôi cần có 2 tệp

• <your-theme>/Magento_Checkout/web/css/source/_extend.lessnơi chúng tôi sẽ nhập các tiện ích mở rộng tùy chỉnh của chúng tôi. Trong trường hợp này@import "_minicart_extend.less"

• <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less Điều đó sẽ chứa các phong cách tùy chỉnh của chúng tôi.

Lý do tại sao chúng ta cần một _extend.lesstệp để chỉ định @importslà vì Magento chỉ bao gồm tự động một _extend.lessmô-đun. Kiểm tra và thêm tất cả *_extend.lesstự động sẽ tốn thời gian và đó là lý do tại sao nó không được thực hiện như thế.

Trong Magento, các tệp chủ đề chịu trách nhiệm cho minicart được đặt trong /vendor/magento/theme-frontend-blank/Magento_Checkout/

Chúng tôi cũng có thể thêm tất cả các kiểu tùy chỉnh của chúng tôi trực tiếp vào _extend.less. Tuy nhiên, việc chia chúng thành các tệp nhỏ hơn và cụ thể như trong mô-đun gốc giúp mã rõ ràng và được tổ chức tốt hơn. Đó cũng là cách được khuyến nghị theo tiêu chuẩn Magento 2.