So fügen Sie eine benutzerdefinierte CSS-Datei in Magento 2 hinzu

30

Gibt es eine Möglichkeit, eine eigene CSS-Datei zu erstellen, die als letzte in der Kaskade geladen wird?

Wenn ja, wie und wo füge ich meine benutzerdefinierte CSS-Datei hinzu?

H. Ferrence
quelle

Antworten:

43

Um benutzerdefinierte CSS hinzuzufügen und zuletzt zu laden, müssen Sie ein benutzerdefiniertes Design einrichten.

  1. Thema erstellen: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
  2. Stellen Sie sicher, dass Sie Ihre Magento-Anwendung in den Entwicklermodus versetzen.
  3. Fügen Sie Ihrem benutzerdefinierten Thema die folgenden Ordner hinzu

-

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

Erstellen Sie die folgenden Dateien:

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

Fügen Sie diesen Code in die Datei default_head_blocks.xml ein

<?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. Wenden Sie Ihr Thema an: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
  2. Bereitstellen statischer Ressourcen (SSH für Magento-Root):

-

php bin/magento setup:static-content:deploy
Joshua34
quelle
Hallo, ich habe es gerade getan, aber die CSS-Datei, die ich hinzufüge, wird nicht geladen, und wenn ich die Seite inspiziere, erhalte ich einen GET-Fehler für die Datei könnte sein?
alexcr
1
Zu implementierender CLI-Befehl: PHP-Bin / Magento-Setup: Statischer Inhalt:
Implementieren
Was soll ich in die zwei neuen CSS-Dateien einfügen, die ich erstellt habe? Nur reines CSS?
Styzzz
1
@ styzzz ja, raw CSS ist ok.
Joshua34
Jep. Ich habe gerade das getan und die Dateien local-m.css und local-l.css in web / css hochgeladen .... Cache geleert und PHP-Bin / Magento-Setup ausgeführt: static-content: deploy. Ich bin im Entwicklermodus. Sie werden immer noch nicht abgeholt. Meine default_head_blocks.xml ist genau wie oben. Aber es werden immer noch nicht die Stypes verwendet, die ich im CSS festgelegt habe
styzzz 13.07.17
15

Um benutzerdefinierte CSS hinzuzufügen und zuletzt zu laden

  1. Folgen Sie der Verzeichnisstruktur

    app / code / vendor / modulenname / view / frontend (für admin adminhtml) / web / css / filename.css

  2. Fügen Sie den CSS-Dateipfad wie unten angegeben zur entsprechenden Layoutdatei hinzu

    <head>
      <css src="Vendor_Module::css/filename.css"/>
    </head>
    <body>
     ....
    </body>
    
Manish
quelle
Einschließen Vendor_Modulefunktioniert bei mir nicht. Das Entfernen funktioniert einwandfrei.
Saravanan DS
@SaravananDS, das Sie durch Ihren Paket- und Modulnamen ersetzen müssen.
Manish
Ja. Nach dem Ersetzen mit meiner Gewohnheit Vendor_Modulenur funktioniert es nicht.
Saravanan DS
@Manish, können wir benutzerdefinierte CSS-Dateien nur auf der Suchergebnisseite laden?
Jafar Pinjar
Müssen Sie hier kein Kinderthema verwenden?
HaFiz Umer
5

Sie können das Medienattribut, das von Magento 2 an das Ende des CSS gestellt wird, im Kopfbereich hinzufügen. Wenn Sie eine Breite von nur 1px festlegen, wird dies auf allen Geräten aktiviert:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>
Cypher909
quelle
Danke, du hast meinen Tag gerettet. Ich möchte nicht mit .less-Dateien arbeiten und sie jedes Mal kompilieren, wenn ich sie bearbeite.
Bourax
Müssen Sie hier nicht erst ein benutzerdefiniertes Thema erstellen?
HaFiz Umer
@HaFizUmer Sie sollten zuerst ein benutzerdefiniertes Thema erstellen. Befolgen Sie die Anweisungen der akzeptierten Antwort und wenden Sie dann die hier gezeigte Methode an.
Cypher909