Magento 2: Wie füge ich benutzerdefinierte CSS für AdminHTML hinzu?


16

Ich muss die CSSDatei für die Admin-Seite in meinem benutzerdefinierten Modul hinzufügen . Wie kann ich dies nur für Admin (Back-End) hinzufügen?

Antworten:


27

1 Erstellen Sie ein Modul, zum Beispiel Vendor / Module

2 Erstellen Sie im Modul eine neue Datei view / adminhtml / layout / default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
     <css src="Vendor_Module::css/test.css"/>
   </head>
</page>

3) Fügen Sie die CSS-Datei im Webordner unter folgendem Pfad hinzu:

view / adminhtml / web / css / test.css

Führen Sie die folgenden Befehle aus und überprüfen Sie sie.

PHP bin / Magento Cache: sauber

php bin / magento setup: static-content: deploy


1
Hallo, ich versuche, <css src="Magento_Catalog::catalog/category-selector.css"/>mein benutzerdefiniertes Modul hinzuzufügen , aber es zeigt 404-Fehler in der Konsole.
Vinaya Maheshwari

In diesem Beispiel ist Vendor_Module nur der angewendete Themenname, oder können wir auch ein neues Modul herausnehmen? @Krishna ijjada
SagarPPanchal

11

Magento 2 verwendet weniger Dateien, so dass Sie auch weniger Schriftarten verwenden können, wie im folgenden Schritt beschrieben.

Neue Datei erstellen unter Vendor/Module/view/adminhtml/web/css/source/_module.less

Führen Sie anschließend den folgenden Befehl aus dem Stammverzeichnis aus und überprüfen Sie ihn

rm -rf var/view_preprocessed/
rm -rf pub/static/adminhtml
php bin/magento setup:static-content:deploy

Ich muss eine .less-Datei hinzufügen, um weniger Variablen wie @ icon-help__content zu verwenden. Ich möchte, dass diese weniger Datei geladen wird, nachdem die anderen Dateien geladen wurden.
AbdulBasit
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.