Pro-Tipp: Ganz einfach herausfinden in welcher LESS Datei der Code steht
UPDATE: Falls ihr Grunt nutzt um eure Themes zu entwicklen, braucht ihr die Einstellung nicht, da dies Grunt für euch übernimmt und die CSS Sourcemap erstellt. Wie ihr das anstellt: Shopware 5 Theme Entwicklung mit Grunt
Heute einen kurzen Beitrag und zwar einen Pro Tipp! Für die Pro's unter uns.
Problem: Wir wollen ein Theme entwickeln / anpassen. An sich kein Problem. Die Preisfrage nun: Was ist aber immer etwas nervig? Genau! Wenn wir in den Chrome Developer Tools das richtige Element gefunden haben, welches wir anpassen wollen, wissen wir nicht in welcher LESS Datei sich der Code dafür befindet.
Natürlich können wir mit dem Editor suchen oder durch die Klassennamen darauf schließen. Oder (da wir alle Pro's) sind lassen wir die "CSS Source Map erstellen" und können direkt sehen in welcher Datei der LESS Code zu finden ist.
Schritt für Schritt
1. Ab ins Backend mit euch. Einloggen!
2. Oben in der Navigation auf "Einstellungen" > "Theme-Manager".
3. Im Theme-Manager oben auf "Einstellungen"
4. Das Häkchen bei "CSS Source Map erstellen" setzen.
5. Cache leeren. Theme kompilieren.
6. Freuen. Fertig!
Mit diesem Pro-Tipp könnt ihr nun schneller und einfacher den geforderten LESS Code finden!
Sicher Dir die besten Shopware 6 Tipps & Tricks
Neueste Beiträge
37 Kommentare
freut uns, dass es hilfreich ist!
Gruß
Alexander
"FireLESS allows Firebug to display the original LESS filename and line number of LESS-generated CSS styles.FireLESS, when coupled with the patched version of LESS (pull request pending), allows you to see, within the CSS sub-panel of the inspector, the LESS file and line number where a certain ruleset was defined rather than the generated CSS line and number (which is not very helpful to find again where you had that declaration).
It currently only works if you use LESS in development mode and in browser mode (make sure less.env is set to "development")."
soweit ich es verstanden habe funktioniert die aktuelle Version von FireLess nicht richtig. Nur im Development Modus.
Ich wuerde dir aber empfehlen Chrome zu nutzen. Zumindest zum Entwickeln. Das wird von Shopware auch so empfohlen.
Ansonsten koenntest du probieren die less.env auf development zu setzen. Wie genau das geht, kann ich dir leider nicht sagen. So sagt es jedenfalls die Beschreibung.
Gruß
Alexander
eine Frage. Ich hab mir das fireless addon mal installiert konnte aber noch keine Veränderung feststellen. Wenn man auf die Details des addons kommt eine englische Beschreibung wo ich nacht durchsteige, was ich da wo noch zusätzlich einstellen muss um die Zeile un den Dateinamen des Codes anezeigt zu bekommen. Und Danke für einen weiteren lehrreichen Artikel.
welches System benutzt du zum Arbeiten? Wenn du Windows nutzt, empfehle ich dir es mit Linux oder OS X zu probieren.
Evtl. auch auf einem linux server direkt.
Gruß
Alexander
Hat jemand einen Rat?
Vielen Dank im Voraus
deine Nachricht war leider im Spam, daher die lange Wartezeit.
Kannst du in die Fehlerlogs deines Servers schauen? Möglicherweise kann dich dabei dein Provider unterstützten. Da findest du meistens detaillierte Informationen zu den Fehlern.
Gruß
Alexander
interessanter Weise hängt sich bei mir die Theme-Kompilierung komplett auf, wenn ich den Haken bei "CSS Source Map erstellen" setze. Die Kompilierung bleibt direkt am Anfang beim Punkt Bearbeite Shop "XXX" ... stehen.
Haben Sie eine Idee womit das zusammenhängen kann?
Viele Grüße
Markus Schwarz
bekommst du eine Fehlermeldung? Vielleicht in den Entwicklertools des Browser in die Konsole schauen.
Wenn es nicht weiter geht, dann wird irgendwo ein Fehler sein.
Gruß
Alexander
Thomas
sehr gut zu wissen.
Danke!
Gruß
Alexander
Für FireBug musst du dieses Addon installieren: addons.mozilla.org/de/firefox/addon/fireless/
Zeigt zwar den ganzen Pfad, anstatt nur die Datei an. Aber erfüllt auch seinen Zweck.
Mit den Firefox Developer Tools funktioniert es auch. Falls das für dich eine Option ist.
Viel Spaß!
Was denkst du?