So ändern Sie die Reihenfolge der CSS-Dateien. Laden Sie das CSS des Moduls vor dem CSS des Themas in magento2?

7

Ich möchte das CSS aller Erweiterungen vor dem CSS des benutzerdefinierten Themas in das <head>Tag laden . Gerade jetzt CSS - Datei der Erweiterung geladen werden nach styles-m.cssund styles-l.css so kann ich nicht außer Kraft setzt Erweiterung CSS aus meinem benutzerdefinierten Thema CSS .

magento2 xml head

— Dipesh Rangani
quelle

2

Es gibt zwei Möglichkeiten:

1> Alle CSS werden je nach Reihenfolge in geladen app/etc/config.php. Sie können Ihr Modul vor das Magento_theme-Modul verschieben, dann wird das gesamte CSS Ihres benutzerdefinierten Moduls vor dem CSS Ihres Themas geladen. Wenn Sie in diesem Fall den Befehl setup: upgrade ausführen, ändert sich Ihre Reihenfolge erneut.

2> Sie können Ihr benutzerdefiniertes Modul erstellen, aber das erste letztere Ihres Namespace muss nach dem Mletzteren stehen, da die Reihenfolge des Moduls in config.php standardmäßig alphabetisch sortiert ist. Hier können Sie Ihr benutzerdefiniertes CSS schreiben, um alle CSS zu überschreiben.

— Yogesh Karodiya
quelle

0

Rufen Sie für modulspezifische Stile das Verzeichnis erneut auf: / _ / web / css. Ändern Sie dann /source/_theme.less: Überschreibt die Standardwerte der Magento UI-Bibliotheksvariablen.

CSS einschließen:

Ihre benutzerdefinierte default_head_blocks.xml sollte sich wie folgt befinden: /Magento_Theme/layout/default_head_blocks.xml. Um eine CSS-Datei einzuschließen, fügen Sie den Abschnitt / "media =" print | "/> in den Abschnitt einer Layoutdatei ein. Wird relativ zum Themen-Webverzeichnis (/ web) angegeben. Im Folgenden wird beispielsweise veranschaulicht, wie

Stylesheets sind im Standard-Blank-Design enthalten:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
      <css src="css/styles-m.css" />
      <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
      <css src="css/print.css" media="print" />
  </head>
</page>

Weitere Informationen finden Sie unter der folgenden URL:

http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-themes.html

— Abhinav Singh
quelle