Wie entwickle ich ein Thema mit Twitter Bootstrap in Magento 2?
8
Haben wir eine Schritt-für-Schritt-Anleitung zum Erstellen eines Twitter-Bootstrap-Themas für Magento 2 oder einen Scratch, der für die neueste Version von Magento 2 erstellt wurde? Kann jemand eine gute Methode vorschlagen, um von vorne zu beginnen?
Magento 2 verwendet kein Bootstrap, sondern ein eigenes WENIGER und CSS im Themenkern. Der Herausgeber kann CSS zusammen mit anderen statischen Ansichtsdateien finden und veröffentlichen, die sich im Pub / Verzeichnis befinden. Der Herausgeber unterstützt auch die Vorverarbeitung von Dateien, die veröffentlicht werden, mithilfe einiger Präprozessoren. Der CSS-Präprozessor besteht beispielsweise aus zwei unabhängigen Präprozessoren wie folgt:
WENIGER Präprozessor: Zusammen mit dem WENIGER PHP-Adapter ermöglicht der WENIGER Präprozessor die Verwendung von WENIGER in Magento. CSS-URL-Resolver: Hiermit werden Links aufgelöst, die in CSS-Quelldateien mithilfe des Herausgebers gefunden wurden, und durch die richtigen ersetzt. Hauptvorteile:
Mit LESS können Benutzer Themen schneller und einfacher anpassen. WENIGER Präprozessor- und CSS-URL-Resolver verbessern die Leistung, beschleunigen das Laden von Seiten und machen das System mit der Suchmaschine benutzerfreundlicher.
Aber wenn Sie Bootstrap in Ihrem Thema verwenden möchten. Sie können diesen Code erstellen. unter Magento_Theme / layout / default_head_blocks.xml. Für mich verwende ich das Porto-Thema. und so fügte porto bootstrap hinzu.
Hey Leute da draußen korrigieren mich, wenn ich falsch liege. aber das basiert auf meiner Erfahrung.
Ich erhalte einen großen Fehler wie Fehler: Nicht übereinstimmendes anonymes define () -Modul: Funktion (t, e, n) {"use strict"; Funktion i (t, e) {für (var n = 0; n <e.length; n ++) {var i = e [n]; i.enumerable = i.enumerable ||! 1, i.configurable =! 0, "Wert" in i && (i.writable =! 0), Object.defineProperty (t, i.key, i)}} Funktion s (t, e, n) {Rückgabe e && i (t.prototype, e), n && i (t, n), t} Funktion r () {Rückgabe (r = Object.assign | | Funktion (t) {für (var e = 1; e <Argumente.Länge; e ++) {var n = Argumente [e]; für (var i in n) Object.prototype.hasOwnProperty.call (n, i) && (t [i] = n [i])} return t}). apply (dies, Argumente)} e = e && e.hasOwnProperty ("default")? ...
Magecode
Können Sie mir hier einen Screenshot schicken?
MazeStricks
0
Magento 2 wird mit einer direkt eingebauten Lite-Version von Bootstrap geliefert. Sie können die meisten der wichtigsten reaktionsschnellen Funktionen von Bootstrap Stock verwenden. Ich habe festgestellt, dass es einen 404-Fehler gibt, wenn es etwas gibt, das nicht verwendet werden kann, wie z. B. .embed-responsive.
Abgesehen davon müssten Sie Ihr eigenes Thema erstellen und Ihre eigenen Dateien hinzufügen, wie @MazeStricks erwähnt.
Magento 2 wird mit einer direkt eingebauten Lite-Version von Bootstrap geliefert. Sie können die meisten der wichtigsten reaktionsschnellen Funktionen von Bootstrap Stock verwenden. Ich habe festgestellt, dass es einen 404-Fehler gibt, wenn es etwas gibt, das nicht verwendet werden kann, wie z. B. .embed-responsive.
Abgesehen davon müssten Sie Ihr eigenes Thema erstellen und Ihre eigenen Dateien hinzufügen, wie @MazeStricks erwähnt.
quelle