PrestaShop mit Webpack (scss) – Installation & Updates 2023

Will man bei PrestaShop bestimmte CSS-Files erweitern, sind viele Anpassungen nur im SCSS-Format möglich.
SCSS Files werden über Webpack verarbeitet, somit muss das CSS-File mit Webpack kompiliert werden.

Webpack für PrestaShop installieren

PrestaShop mit Webpack (scss) - Installation & Updates 2023
PrestaShop Updates mit Webpack (SCSS)

Installiert wird die kostenlose Anwendung direkt auf dem Webserver, die meisten Webhoster bieten diese Erweiterung per Klick ebenfalls an.
Falls dies nicht der Fall sein sollte, kontaktieren Sie zuerst den Hoster, ob es in Ihrem Paket eingerichtet werden kann.

Via FTP-Zugriff kann Webpack gestartet und ausgeführt werden, öffnen Sie dazu den folgenden Ordner:
PrestaShop/themes/classic/_dev/

Nun können Sie die Pakete installieren, welche benötigt werden und zwar via Befehlszeile, siehe Screenshot.

PrestaShop mit Webpack (scss) - Installation & Updates 2023
Webpack Befehle

Sobald dieser Befehl erfolgreich ausgeführt wurde, ist der Ordner ’node_modules‘ im _dev Ordner sichtbar.

PrestaShop CSS-Updates mit Webpack speichern

Will man neue Updates als SCSS-File speichern, dann kann das CSS-File angepasst und gespeichert werden.
Im Anschluss einfach den _dev/ Ordner im PrestaShop öffnen und über die Kommandozeile im FTP-Programm folgende Befehle ausführen:

Eigene CSS-Files über Webpack erstellen:

npm run build

Für Updates an bestehenden CSS-Files:

npm run watch

 

Weitere Informationen zu Webpack: https://webpack.js.org/
Informationen zu Node.js: https://nodejs.org/

 


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.