Jak dodać niestandardowy plik CSS w Magento 2

Czy istnieje sposób na utworzenie własnego pliku CSS, który ładuje się ostatnio w kaskadzie?

Jeśli tak, to w jaki sposób i gdzie mogę dodać niestandardowy plik CSS?

magento2 css

— H. Ferrence
źródło

Odpowiedzi:

Aby dodać niestandardowy css i załadować na końcu, musisz skonfigurować niestandardowy motyw.

Utwórz motyw: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Upewnij się, że ustawiłeś aplikację Magento w tryb programisty.
Dodaj następujące foldery do niestandardowego motywu

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

Utwórz następujące pliki:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

umieść ten kod w pliku default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>

Zastosuj motyw: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
Wdróż zasoby statyczne (SSH do magento root):

php bin/magento setup:static-content:deploy

— Joshua34
źródło

Cześć, właśnie to zrobiłem, ale dodany plik css nie ładuje się, a gdy sprawdzam stronę, pojawia się błąd GET dla pliku, przy 500 (wewnętrzny błąd serwera) masz pojęcie, co to jest może być?

— alexcr

Polecenie CLI do wdrożenia: konfiguracja php bin / magento: zawartość statyczna: wdrożenie

— Joshua34

Co powinienem umieścić w dwóch nowych plikach CSS, które utworzyłem? Po prostu czysty CSS?

— styzzz

@styzzz tak, raw css jest w porządku.

— Joshua34

Tak. Właśnie to zrobiłem, przesłałem pliki local-m.css i local-l.css do web / css .... wyczyściłem pamięć podręczną i uruchomiłem php bin / magento setup: static-content: deploy. Jestem w trybie programisty. Nadal ich nie odbiera. Mój default_head_blocks.xml jest dokładnie taki jak powyżej. Ale nadal nie używa tych typów, które ustawiłem w CSS

— styzzz

Aby dodać niestandardowy css i załadować na końcu

Postępuj zgodnie ze strukturą katalogów

app / code / vendor / modulename / view / frontend (for admin adminhtml) / web / css / filename.css

Dodaj ścieżkę pliku css do odpowiedniego pliku układu, jak podano poniżej

<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>

— Manish
źródło

Włączenie Vendor_Modulenie działa dla mnie. Usunięcie działa dobrze.

— Saravanan DS

@ SaravananDS musisz zastąpić nazwą pakietu i modułu.

— Manish

Tak. Po zastąpieniu moim niestandardowym Vendor_Moduletylko nie działa.

— Saravanan DS

@Manish, czy możemy załadować niestandardowy plik css tylko na stronie wyników wyszukiwania?

— jafar pinjar

Nie musisz używać motywu podrzędnego?

— HaFiz Umer

Możesz dodać atrybut media, który magento 2 umieści na końcu css w sekcji head. Ustawienie szerokości tylko 1px spowoduje włączenie go na wszystkich urządzeniach:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

— Cypher909
źródło

dziękuję, uratowałeś mi dzień. Nie chcę pracować z plikami .less i kompilować za każdym razem, gdy je edytuję.

— bourax

nie musisz najpierw tworzyć niestandardowego motywu?

— HaFiz Umer,

@HaFizUmer Najpierw należy utworzyć niestandardowy motyw. Postępuj zgodnie z instrukcjami z zaakceptowanej odpowiedzi, a następnie użyj metody pokazanej tutaj.

— Cypher909