Jak dodać niestandardowy plik CSS w Magento 2

30

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:

43

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

  1. Utwórz motyw: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
  2. Upewnij się, że ustawiłeś aplikację Magento w tryb programisty.
  3. 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>
  1. Zastosuj motyw: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
  2. 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
1
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
1
@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
15

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

  1. Postępuj zgodnie ze strukturą katalogów

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

  2. 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
5

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