Lưu ý 1: Điều này sẽ luôn cho rằng bạn đang gia hạn magento-blank.
Lưu ý 2: <theme-dir>làapp/design/frontend/Vendor/theme/
Khái niệm cơ bản: Thay đổi biến cơ sở
(đối với tl; dr, bỏ qua kết luận)
Hầu hết các hướng dẫn tôi tìm thấy chỉ bao gồm bước này trong chủ đề với LESS, vì vậy tôi sẽ cố gắng để ngắn gọn. Magento 2 có một bộ Biến cơ sở xác định các khía cạnh thường được sử dụng của một chủ đề. Màu sắc, phông chữ, kiểu tiêu đề trang, v.v được xác định trong các biến này.
Trong <magento-root>/lib/web/css/source/lib/variables/bạn sẽ tìm thấy một số tệp LESS được đặt tên trực quan. Trong mỗi trong số này, bạn có thể tìm thấy các giá trị được gán cho các biến cho nhiều yếu tố phổ biến trong Magento 2.
Để thay đổi bất kỳ biến nào trong số này, chỉ cần tạo một tệp trong <theme-dir>/web/css/source/_theme.less.
Thí dụ:
@newPrimary: #1980fe;
@primary__color: @newPrimary;
@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);
Về mặt kỹ thuật, bạn có thể đặt bất kỳ CSS hoặc LESS nào vào đây và nó sẽ áp dụng thành công cho trang web của bạn (nhưng không làm điều này). Tôi sẽ giải thích làm thế nào điều này hoạt động trong một khoảnh khắc.
Thêm tệp CSS mới
Bạn có thể thêm CSS mới vào đầu tất cả các trang mẫu của bạn.
Tạo <theme-dir>/Magento_Theme/layout/default_head_blocks.xml:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/myStyle.css" />
</head>
</page>
Và sau đó, bạn tạo một tệp bằng CSS hoặc LESS mới của mình:
<theme-dir>/web/css/myStyle.less. Bạn có thể viết LESS hoặc CSS tại đây.
Ghi đè các kiểu hiện có
Tôi thấy rằng Magento 2 LESS không dễ dàng thay thế bằng cách thêm một tệp CSS mới. Và đây là nơi tôi bắt đầu bị lạc, và tôi sẽ giải thích làm thế nào Magento 2 tìm thấy các tệp LESS của nó.
Theo mặc định, Magento 2 sẽ bao gồm (và cuối cùng quay lại) các tệp này:
<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Styles
Các tệp này bao gồm (nhập) các tệp LESS khác, thường bao gồm nhiều tệp LESS hơn. Và đây là nơi mà các hướng dẫn khác trở nên vô ích với tôi và tôi sẽ giải thích những gì tôi tìm thấy, tốt nhất có thể.
Ma thuật nguồn / lib
Trong styles-m.less, có dòng : @import 'source/lib/_responsive.less';. Bạn sẽ nhận thấy rằng không có source/libthư mục trong magento-blankchủ đề. Rõ ràng là phong cách Magento 2 cuối cùng đã quay trở lại <magento-root>/lib/web/css/. Nó ở đó bạn tìm thấy source/lib/_responsive.less.
Các biến bạn sử dụng _theme.lesscó sẵn do một source/libtệp được nhập trong magento-blankchủ đề. Lưu ý: _theme.less là một tệp trống trong các chủ đề mặc định. Tiếp tục đọc để tìm hiểu lý do tại sao điều này là quan trọng cần lưu ý.
"Tự động bao gồm" tập tin LESS
Một vài hướng dẫn tôi thấy đã nhấn mạnh rằng bạn có thể tạo <theme-dir>/web/css/_styles.lessvì Magento tự động tìm và bao gồm tệp đó. Tôi thấy đây là một lời khuyên tồi.
Nếu bạn tạo <theme-dir>/web/css/_styles.less, trang web của bạn sẽ bị hỏng. theme-frontend-blank/web/css/styles-m.lessnhập khẩu _styles.less, lần lượt nhập thêm 3 tệp .less, mỗi tệp nhập nhiều tệp .less hơn.
Nếu bạn tạo một _styles.less, bạn đang ghi đè nó. Bằng cách ghi đè _styles.less, bạn đang ghi đè tất cả các tệp mà nó nhập và tất cả các tệp mà các tệp đó nhập, v.v.
Lưu ý về _theme.less: Tệp này trống trong các chủ đề mặc định và do đó an toàn chỉ cần tạo và bắt đầu thêm vào nếu bạn đang dựa trên chủ đề của mình theo mặc định. Tuy nhiên, nếu bạn đang mở rộng một chủ đề đã mở rộng mặc định, cơ hội_theme.lessđã được sử dụng. Tạo ra một lần nữa sẽ ghi đè lên nó.
@Magento_import huyền diệu
Trong styles-m.lessbạn sẽ thấy một vài dòng nhận xét:
//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets
Những dòng này không thực sự nhận xét ra! Magento 2 có xử lý đặc biệt cho các dòng bắt đầu với //@magento_import. Những dòng này chỉ có thể được bao gồm trong các tập tin tại <theme-dir>/web/css.
Các dòng trên hướng dẫn Magento 2 bao gồm bất kỳ tệp nào trong chủ đề theo mẫu đã cho. Vì vậy, các dòng trên sẽ tự động bao gồm:
'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';
'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';
'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so on
Thêm các tập tin tên _widgets.lessvà _module.less sẽ được tự động phát hiện và bao gồm, ngay cả khi một module mới hoặc một module mà chưa có tập tin đó.
Xin lưu ý rằng Magento-Blank bao gồm các tệp đó cho hầu hết các Mô-đun và nếu bạn muốn sử dụng phương pháp này, bạn sẽ cần sao chép-dán bản gốc (trừ khi bạn đang viết lại hoàn toàn).
Phần kết luận
(Đọc: không sử dụng _styles.less).
Khi bạn đang tìm cách thay đổi CSS của một phần tử, bạn muốn làm tốt nhất có thể để tìm tệp nào được định nghĩa theo kiểu. Đôi khi, tất cả những gì bạn cần làm là thay đổi một biến _theme.less. Hầu hết các lần, tôi nghi ngờ, bạn chỉ cần sao chép-dán _module.lesshoặc _widgets.lessvào chủ đề của bạn và thực hiện các thay đổi.
Nếu bạn đã tạo một mô-đun mới hoặc có các thành phần HTML mới, bạn có thể cần tạo tệp LESS và bao gồm nó một cách riêng biệt trong <head>mỗi trang.
Trong trường hợp phức tạp, bạn có thể cần phải tạo mới @importhoặc @magento_import. Bạn muốn tìm đứa trẻ thấp nhất có ý nghĩa cho những gì bạn đang làm, vì vậy bạn không sao chép một loạt các tệp không cần thiết hoặc thêm @importcác dòng khó hiểu dường như không dẫn đến đâu.