Magento 2 - Przesłanianie CSS bez użycia! Ważne wszędzie

Obecnie pracuję dla strony Magento 2 dla klienta. Załóżmy, że marka mojego klienta jest, boofara motyw, który próbuję rozszerzyć / zastąpić, jest foobarustawiony jako motyw nadrzędnyfrontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

Następnie pod frontend/Foobarthemes/boofar/web/css/source/_theme.lesskodem CSS, który chcę zastąpić. Próbowałem również z tym _extend.less.

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

Jestem zmuszony użyć !importantwszystkiego, żeby tu działać. Żadna z czcionek i tekstu nie działa w powyższym kodzie.

Czy nie zrozumiałem poprawnie przepływu pracy nakładki Magento 2?

Możesz mieć swoje style w _theme.lesspliku tylko wtedy, gdy chcesz zastąpić _theme.lessplik motywu nadrzędnego . W przypadku tego pliku jest ładowany tylko jeden z nich i zawsze będzie to wybrany motyw, jeśli plik tam istnieje. Stamtąd użyje schematu awaryjnego, aby znaleźć ten plik i użyć go.

Tak więc w twoim przypadku użycie _extend.lesspliku jest właściwym plikiem do użycia.

Jest to trochę mylące, ponieważ kod, który jest wstawiany do _extend.lesspliku, jest ładowany na końcu, kiedy Magento kompiluje wszystkie style, które istnieją na stronie. Zastanawiam się więc, czy coś nie zadziera z kolejnością ładowania.

Patrząc na sposób skonfigurowania, spróbuj ustawić motyw w innej przestrzeni nazw, a nie w tym samym motywie. Może to nie rozwiązać problemu, ponieważ sposób skonfigurowania motywu jest taki sam, jak w Magento skonfigurowany motyw luma / blank. Ale za całą pracę, którą wykonałem, mam swoją przestrzeń nazw vender, która następnie rozszerzy się albo z motywu innej firmy, albo z luma / blank.

Następną rzeczą do wypróbowania byłoby zawinięcie kodu we wbudowane zapytania multimedialne. Pójdę do bardziej szczegółowo tutaj , ale w zasadzie zatrzymuje swoje style od ładowane są dwa razy do styles-l.cssi z styles-m.cssplików.

//
//    Common
//--------------------------------------
& when (@media-common = true) {}  

Odtąd wszystko sprowadza się do specyfiki CSS. Jeśli jest coś jeszcze, co jest wyższe niż twoje, musisz być bardziej szczegółowy w swojej definicji klasy / id w stylach. Możesz opublikować zdjęcie struktury DOM, aby pokazać, na co celujesz, a co ponad to, co chcesz osiągnąć.

Jeśli możesz zastosować swoje style w pliku _extend.less, oznacza to, że masz problemy ze specyfiką css. Ponieważ Magento2 używa mniejszej kompilacji, większość stylów jest bardzo specyficzna. Aby je zastąpić, selektory stylów muszą być bardziej lub tak samo konkretne. Nie będę tutaj zamieszczał szczegółów samej koncepcji, ponieważ w Internecie można znaleźć wiele artykułów.

Jeśli używasz domyślnej konfiguracji MNIEJ, upewnij się, że WSZYSTKIE MNIEJ jest zapisane w zapytaniach o media M2 MNIEJ. Jeśli tego nie zrobisz, skończysz z duplikatem CSS i prawdopodobnie problemami ze specyfiką.

Wszystko sprowadza się do specyficzności i kolejności ładowania, Twój CSS powinien ładować się po motywach nadrzędnych (lub modułach), aby zastąpić to wszystko, co musisz zrobić, to spełnić ich specyfikę.

Na przykład, jeśli używa motywu nadrzędnego

.parent-selector .selector {
    ...
}

Następnie musisz napisać ten sam selektor, jeśli z jakiegoś powodu to nie działa, wystarczy dodać kolejny selektor przed nim. Prostym sposobem jest dodanie ciała przed nim, ponieważ obejmuje każdy selektor i dodaje specyficzności. Tak jak:

body .parent-selector .selector {
    ...
}

Ten artykuł zawiera kilka dobrych informacji na temat specyfiki CSS.

Możesz też zastąpić cały plik

Jeśli robisz wiele dostosowań, lepiej jest zastąpić cały plik zamiast rozszerzać. Aby to zrobić, po prostu dodaj plik do motywu, używając tej samej ścieżki pliku i nazwy.

Aby uzyskać wyższy priorytet, możesz zduplikować selektor:

  .home.home {
    display: none;
  }

Musisz przesłonić ten sam .lessplik motywu nadrzędnego, który chcesz przesłonić, na przykład jeśli chcesz przesłonić _theme.lessplik, musisz skopiować ten plik do motywu podrzędnego tutaj (upewnij się, że ta sama ścieżka motywu nadrzędnego)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

możesz zastąpić swój css tutaj.

Wstrzyknięcie niestandardowych plików css jest lepsze.

Czytaj więcej: Jak dodać niestandardowy plik CSS w Magento 2

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

Pamiętaj, aby skompilować za pomocą grunt / less w celu przetworzenia css: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html