Przesłanianie pustych stylów motywów w Magento 2

Jak zabrałbyś się do przesłonięcia stylów nawigacji dla niestandardowego motywu podczas dziedziczenia z pustego motywu w Magento 2?

Mam theme.cssplik w app/design/frontend/<Vendor>/<theme>/web/cssfolderze, ale wiem, że Magento 2 używa MNIEJ. Mogę z łatwością zastąpić style w theme.cssarkuszu stylów, ale nie chcę z nich korzystać !important.

Używam również Bootstrap 3 i zakładam, że style z pustego motywu zastąpią instrukcje stylów pasujące do Bootstrap. Jak najlepiej to podejść?

— Gareth Daine
źródło

Odpowiedzi:

Dwa sposoby zalecane przez Magento w celu zastąpienia lub rozszerzenia stylów z motywu nadrzędnego:

1. Prosty sposób

Poszerzać:

W swoim katalogu motywów utwórz web/css/sourcepodkatalog. (Już tę część zrobiłeś) Utwórz tam _extend.lessplik.

Zgodnie z dokumentacją :

„Rozszerzenie motywu za pomocą _extend.less jest najprostszą opcją, gdy jesteś zadowolony ze wszystkiego, co ma motyw nadrzędny, ale chcesz dodać więcej stylów”.

Nadpisanie:

Zamiast tworzyć _extend.lessplik, tworzysz _theme.lessplik. W takim przypadku musisz skopiować wszystkie potrzebne zmienne od rodzica _theme.less, w tym te, które nie zostaną zmienione. Następnie wprowadź zmiany.

Zgodnie z dokumentacją wadą jest:

„Musisz monitorować i ręcznie aktualizować pliki przy każdej aktualizacji _theme.less rodzica.”

2. Zorganizowany sposób

Poszerzać:

Ta metoda pozwala lepiej uporządkować kod. Twoje zmiany zostaną uporządkowane. Zamiast używać jednego _extend.less pliku do uwzględnienia wszystkich zmian, tworzysz plik rozszerzenia dla każdego komponentu z biblioteki interfejsu użytkownika Magento, którą chcesz zmienić.

Powiedz, że chcesz rozszerzyć style z przycisków i elementów nawigacyjnych. W katalogu motywów utwórz 2 pliki: _buttons_extend.lessa _navigation_extend.lessnastępnie dodaj zmiany dla każdego komponentu w odpowiednim pliku.

Następnie tworzysz _extend.lessplik dodając ten kod:

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

Nadpisanie:

W swoim tematem, utwórz kopię pliku odpowiadającego komponentu UI chcesz zmienić ( _buttons.less, _navigation.less, etc) Ten plik zastąpi _buttons.lesstematu nadrzędnego.

Ważne jest, aby zauważyć różnicę między nadpisywaniem a rozszerzaniem .

Możesz przeczytać więcej o zastępowaniu i rozszerzaniu w tej dokumentacji lub o CSS w Magento 2 w Podręczniku programisty Frontend .

— Luis Garcia
źródło

Powiedzmy, że mam folder Vendor_Namespace, dodam tam inny folder o nazwie „web / css / source / _extend.less”, a plik _extend.less w web / css / source / będzie wiedział, gdzie leży odpowiedni plik? Czy rozumiem to poprawnie

— Max

Tak, po prostu utwórz plik web/css/source/_extend.lessi umieść tam swoje style.

— Luis Garcia,

Utworzyłem plik _extend.less, zaimportuj _slider.less: <folder_theme> / css / source / oba pliki są w tej samej ścieżce, ale nie działają, wszystkie reguły w _slider.less nie zostały znalezione w plikach generowanych .css, Jestem w trybie programisty i uruchamiam „konfigurację php magento: static-content: deploy”

— xzegga

Czy usunąłeś pamięć podręczną przeglądarki?

— Luis Garcia,

Czy mogę zastąpić folder <theme_folder> / css / source / lib / variable? jak mogę zmienić zmienną mniejszego pliku? (powiedzmy, że chcę zastąpić na przykład przycisk @ w tle) - muszę zapisać go w _buttons_extend.less lub mogę zastąpić wszystkie lin / web / css / source / lib / zmienne

— Goldy

Miałem podobny problem z użyciem Foundation. Oficjalnym sposobem na to jest zastąpienie mniejszego pliku określonego modułu i zmodyfikowanie tam css. Zostanie on następnie odebrany przez Magento podczas kompilacji

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

Ostatecznie usunąłem wszystkie domyślne pliki CSS stworzone przez Magento. O wiele łatwiej napisałem niestandardowy CSS, szczególnie przy użyciu frameworka takiego jak Bootstrap, niż próbować przesłonić wszystkie różne moduły. Możesz to zrobić w:

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

— Mike Stumpf
źródło

Dobry sposób na popełnienie czegoś. Ale pytanie dotyczy „rozszerzenia” pełnego motywu i dodania do niego więcej.

— Miguel Felipe Guillen Calo

Nie, pytanie dotyczy zastąpienia.

— Czarny

Powiedzmy, że chcesz przesłonić styles-m.css , a następnie umieść kopię web/cssswojego motywu, nazwij go custom-styles-m.css .

Następnie użyj tego kodu w swoich motywach 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>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...

— czarny
źródło