SCSS kompliliert nicht bei Hot Reload

Shopware 6 (German) Themes & Design
1

Hallo zusammen,

für die Entwicklung eines Themes habe ich das Production Package geklont und dort mein eigenes Theme angelegt.

Während der Entwicklung nutze ich bin/watch-storefront.sh.

Direkt Änderungen an Twig laufen durch, zumindest nach einem manuellen Reload mit Port 9998.
Änderungen an SCSS werden allerdings nicht in CSS kompiliert. Dazu muss ich immer bin/watch-storefront.sh oder eben theme:compile etc. durchführen. Dann werden meine SCSS Änderungen auch angezeigt. D.h. scheinbar läuft die SCSS zu CSS nur im Hot Reload Mode nicht.

Mein Setup ist Composer basiert mit DDEV. Port 9998 und 9999 passen eigentlich.

Hat jemand ne Idee an was das liegen könnte?

Kann ich alternativ auch manuell das SCSS nach CSS Kompilieren anstoßen?

Bin für jeden Hinweis dankbar!

Viele Grüße
Michael

 

PS: bekommt beim start bin/watch-storefront.sh auch folgenden Fehler - auch wenn die URL dann it Port 9998 funktioniert.

Unable to open browser! Details:
Error: spawn xdg-open ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
    at onErrorNT (internal/child_process.js:469:16)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  errno: ‘ENOENT’,
  code: ‘ENOENT’,
  syscall: ‘spawn xdg-open’,
  path: ‘xdg-open’,
  spawnargs: [‘sw-ebro-dev.ddev.site:9998’]
}

 

2

Manuell sollte mit ./psh.phar storefront:dev zumindest laufen?!

3

Da ich mit dem Production Template arbeite, hab ich die psh.phar leider nicht verfügbar. Wenn ich es richtig verstanden habe, ist das Developer Template auch eher für Core Contribution. Aber vielleich habe ich das auch falsch verstanden.

Inzwischen habe ich die Fehlermeldung durch Installation von “xdg utils” in meinem Docker Container wegbekommen. Das Problem, dass SCSS nicht automatisch kompiliert besteht aber nach wie vor. Falls also jemand nen Lösungsvorschlag für mich hat, gerne her damit.

4

Falls es an Deinem Docker-Setup liegt, probier es mal hiermit: GitHub - vanWittlaer/sw6-docker: Docker setup for Shopware 6 custom projects (das tut’s bei mir) oder mit dem Setup von dockware.io, das müsste eigentlich auch gehen.

Viel Erfolg,

Geert

5

Gibt es hierfür eine Lösung? Habe das gleiche DDEV Setup. Kompilieren funktioniert nur auf dem Default Theme. Ändere ich die base.scss im Vendor Order funktioniert der watcher super.

Ändere ich die base.scss in meinem custom Theme funktioniert der watcher nicht. Allerdings wenn ich bin/watcher-storefront.js ausführe wird alles korrekt kompiliert nur der watcher funktioniert nicht.

6

Falls jemand das selbe Problem hat hier ein kleiner Workaround für storefront. Es ist zwar keine optimale Lösung, allerdings kann man so wenigstens mit dem Production Template Themes anpassen ohne alles manuell machen zu müssen:

1 . Schritt
package.json anlegen mit folgendem Inhalt anlegen:
 

{
  "name": "packagename",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "watch": "^1.0.2"
  },
  "scripts": {
    "watch": "watch 'bin/console theme:compile' ./custom/plugins/ThemeName/src/Resources/app/storefront/src/scss"
  }
}

2. Schritt
Folgendes in der Konsole ausführen, damit alle depenencies installiert werden.

npm install

3. Schritt
Watch auf den Ordner „custom/plugins/ThemeName/src/Resources/app/storefront/src/scss*“ starten. Sobald sich eine Datei im Ordner „custom“ verändert wird ein theme:compile ausgeführt.

npm run watch

 

7

Arbeite auf WIN 10 mit der WSL 1 (nicht mit 2) und DDEV / Docker und PhpStorm als IDE.

Wenn ich SCSS Dateien direkt im Docker Container ändere z.B. über ddev ssh und dort eine Datei über z.B. vim, dann wird die Änderung auch registriert und das Hot Reload funktioniert für SCSS Änderungen einwandfrei. Vermute das könnte daran liegen, da es in einem anderen File-System geändert wird.

Wäre super wenn wir da ne brauchbare Lösung finden könnten. Den Ansatz von uniqueweb ist ja schon mal eine Hilfe. Aber theme:compile dauert halt auch immer relativ lange.

PS: Hab jetzt mal testweise mich mit Visual Studio Code direkt in den Web Container gehängt und dort kann ich das Hot Reload bei SCSS Änderungen wunderbar nutzen. Bisher der beste Workaround den ich gefunden habe.

8

Kurzes Update:

Nachdem ich auf DDEV 1.16 bin und in der config das Setting " nfs_mount_enabled: false " verwendet habe, läuft das Hot Reload so wie es soll. Auch ganz regulär über z.B. phpStorm.

1 „Gefällt mir“
9

Mit ddev v1.16.7 scheint das nicht mehr zu gehen, Reload funktioniert nur wenn man direkt im Container die Datei ändert z.B. mit nano.

10

Habe auch v1.16.7 hier aber bin inzwischen von WSL1 auf WSL2 umgestiegen und da läuft es aktuell problemlos. In der WSL2 Konstellation läuft DDEV allerdings nicht mehr auf WIN sondern innerhalb der WSL2 Distri (z.B. Ubuntu).

11

Schade, bei mir auf dem Mac leider nicht.

Wie machst Du das?

12

Auf WIN kann VSC Projekte direkt aus einem Docker Container öffnen. Ob das auf nem Mac kann ich Dir leider nicht sagen. Die VSC Extension „Remote Containers“ müsste das können.

13

Vielen Dank! :grinning: :+1: