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

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?

magento2 css

— H. Ferrence
quelle

Antworten:

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

Thema erstellen: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Stellen Sie sicher, dass Sie Ihre Magento-Anwendung in den Entwicklermodus versetzen.
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>

Wenden Sie Ihr Thema an: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
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

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

@ 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

Um benutzerdefinierte CSS hinzuzufügen und zuletzt zu laden

Folgen Sie der Verzeichnisstruktur

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

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

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