Uwaga 1: To zawsze zakłada, że przedłużasz magento-blank.
Uwaga 2: <theme-dir>jestapp/design/frontend/Vendor/theme/
Podstawy: zmiana zmiennych podstawowych
(dla tl; dr, przejdź do wniosku)
Większość przewodników, które znalazłem, opisuje ten krok w temacie MNIEJ, więc postaram się to skrócić. Magento 2 ma podstawowy zestaw zmiennych, które definiują często używane aspekty motywu. Kolory, czcionki, styl tytułów stron itd. Są zdefiniowane w tych zmiennych.
W <magento-root>/lib/web/css/source/lib/variables/znajdziecie szereg intuicyjnie nazwanych plików mniej. W każdym z nich można znaleźć wartości przypisane do zmiennych dla wielu wspólnych elementów w Magento 2.
Aby zmienić dowolną z tych zmiennych, po prostu utwórz plik w <theme-dir>/web/css/source/_theme.less.
Przykład:
@newPrimary: #1980fe;
@primary__color: @newPrimary;
@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);
Technicznie możesz umieścić tutaj dowolny kod CSS lub MNIEJ, który z powodzeniem zastosuje się do Twojej witryny (ale nie rób tego). Wyjaśnię, jak to działa za chwilę.
Dodanie nowego pliku CSS
Możesz dodać nowy CSS do nagłówka wszystkich stron szablonów.
Utwórz <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>
Następnie tworzysz plik z nowym CSS lub MNIEJ:
<theme-dir>/web/css/myStyle.less. Możesz tutaj napisać LESS lub CSS.
Przesłanianie istniejących stylów
Odkryłem, że Magento 2 LESS nie jest łatwo zastąpione przez dodanie nowego pliku CSS. I w tym momencie zacząłem się gubić, a ja wyjaśnię, jak Magento 2 znajduje swoje MNIEJsze pliki.
Domyślnie Magento 2 zawiera (i ostatecznie do nich wraca) następujące pliki:
<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
Pliki te obejmują (importuj) inne pliki LESS, które często zawierają jeszcze więcej plików LESS. I tam inni przewodnicy stali się dla mnie nieprzydatni, a ja najlepiej wyjaśnię to, co znalazłem.
Źródło / lib Magic
W styles-m.lessistnieje linia: @import 'source/lib/_responsive.less';. Zauważysz, że source/libw magento-blankkompozycji nie ma katalogu . Oczywiste jest, że style Magento 2 ostatecznie się do tego odwołują <magento-root>/lib/web/css/. To tam znajdziesz source/lib/_responsive.less.
Zmienne, których używasz, _theme.lesssą dostępne z powodu source/libpliku zaimportowanego do magento-blankkompozycji. Uwaga: _theme.less jest pustym plikiem w domyślnych motywach. Kontynuuj czytanie, aby dowiedzieć się, dlaczego warto to zanotować.
Pliki „automatycznie dołączane” MNIEJ
Kilka przewodników, które znalazłem, nalegało, abyś mógł utworzyć, <theme-dir>/web/css/_styles.lessponieważ Magento automatycznie wyszukuje i dołącza ten plik. Uważam to za złą radę.
Jeśli utworzysz <theme-dir>/web/css/_styles.less, Twoja witryna ulegnie awarii. theme-frontend-blank/web/css/styles-m.lessimportuje _styles.less, co z kolei importuje 3 kolejne pliki .less, z których każdy importuje jeszcze więcej plików .less.
Jeśli utworzysz plik _styles.less, zastępujesz go. Przesłaniając _styles.less, zastępujesz wszystkie importowane pliki, wszystkie pliki, które te pliki importują i tak dalej.
Uwaga na temat _theme.less: Ten plik jest pusty w domyślnych motywach, dlatego można go bezpiecznie utworzyć i rozpocząć dodawanie, jeśli opierasz swój motyw na domyślnych. Jeśli jednak rozszerzasz motyw, który już rozszerza wartość domyślną, szanse są_theme.lessjuż wykorzystane. Ponowne utworzenie go zastąpi.
Magiczny @magento_import
W styles-m.lesswas zobaczyć kilka odkomentowanymi linii:
//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets
Te wiersze nie zostały skomentowane! Magento 2 ma specjalną obsługę linii rozpoczynających się od //@magento_import. Te linie mogą być zawarte tylko w plikach w <theme-dir>/web/css.
Powyższe linie nakazują Magento 2 dołączenie dowolnego pliku do motywu zgodnego z podanym wzorem. Tak więc powyższe linie będą automatycznie zawierać:
'<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
Dodanie nazw plików _widgets.lessi _module.less zostanie automatycznie znalezione i uwzględnione, nawet jeśli jest to nowy moduł lub moduł, który jeszcze nie ma tego pliku.
Należy pamiętać, że Magento-Blank zawiera te pliki dla większości modułów, a jeśli chcesz skorzystać z tej metody, musisz skopiować i wkleić oryginały (chyba że wykonujesz pełne ponowne zapisywanie).
Wniosek
(Czytaj: nie używaj _styles.less).
Kiedy chcesz zmienić CSS elementu, staraj się jak najlepiej znaleźć plik, w którym styl jest zdefiniowany. Czasami wszystko, co musisz zrobić, to zmienić zmienną _theme.less. Podejrzewam, że w większości przypadków wystarczy skopiować i wkleić _module.lesslub _widgets.lessdo motywu i wprowadzić zmiany.
Jeśli utworzyłeś nowy moduł lub masz nowe elementy HTML, może być konieczne utworzenie pliku LESS i umieszczenie go osobno na <head>każdej stronie.
W skomplikowanych przypadkach może być konieczne utworzenie nowego @importlub @magento_import. Chcesz znaleźć najniższe dziecko, które ma sens w tym, co robisz, więc nie wklejasz kopii niepotrzebnych plików ani nie dodajesz mylących @importlinii, które wydają się prowadzić do nikąd.