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