Hallo,
wenn man ein eigenes Theme erstellt und am scss etwas ändert, muss jedes mal der „theme:compile“-Befehl gestartet werden.
Gibt es auch eine Möglichkeit einen watcher (wie storefront:watch) laufen zu lassen damit immer automatisch compiliert wird?
P.S. Ich nehme die Developer Version auf einer VM.
./psh.phar storefront:hot
Vorher in der base.html.twig
{% set isHMRMode = false %}
auf true setzen
Ich hab in der “vendor/shopware/platform/src/Storefront/Resources/views/base.html.twig” isHMRMode auf true gesetzt jetzt wird überhaupt kein css mehr geladen, könnte das daran liegen das Shopware in einem Unterverzeichnis (127.0.0.1/sw6) installiert ist ist und nicht direkt?
Wenn du den Modus aktivierst musst du ./psh.phar storefront:hot ausführen, damit die Dateien on-the-fly kompiliert werden.
Hab ich gemacht es kommt:
> sw-next-storefront@1.0.0 hot /var/www/html/sw6/vendor/shopware/platform/src/Storefront/Resources
> NODE_ENV=development MODE=hot webpack-dev-server --config webpack.config.js
ℹ USING WEBPACK CONFIG FILE: ./build/webpack.hot.config.js
ℹ Compiling Shopware 6 Storefront
✔ Shopware 6 Storefront: Compiled successfully in 43.23s
DONE Compiled successfully in 55420ms12:58:58 PM
aber die Seite lädt kein css mehr.
Hilft dir evtl. dieser Quickfix? https://github.com/shopware/platform/pull/171/files
Wie schaut im Quelltext unten deine URL aus zu den Javascript Dateien?
Ich den starken verdacht weil wir den Shop nur über /public aufrufen können wird es daran liegen, habe jetzt über Vagrant einen Shop aufgesetzt und es funktioniert wunderbar.
Das wird das Problem sein mit /public, ja - Denn /public muss man nicht aufrufen. Dann habt ihr die falsche .htaccess / nginx config. Im Kern ist Shopware 6 eine Symfony Application.
Bei mir funktioniert die hot reload Funktion prinzipiell. Allerdings gibt es scheinbar noch Probleme mit der Vererbung.
In meinem Fall wird z.B. das Mixin „media-breakpoint-up(sm)“ nicht gefunden, während des HOT Reloads.
Wenn ich allerdings das Theme compile „./bin/console theme:compile“ funktioniert alles ohne Probleme.
Hat dazu jemand eine Idee?
Shopware 6 Storefront: Compiled with some errors in 5.62s
ERROR Failed to compile with 1 errors9:55:09 AMerror in /project/path/custom/plugins/MyTheme/src/Resources/storefront/style/base.scss
Module build failed (from /project/path/platform/src/Storefront/Resources/node_modules/sass-loader/lib/loader.js):
@include media-breakpoint-up(sm) {
^
No mixin named media-breakpoint-up
in /project/path/custom/plugins/MyTheme/src/Resources/storefront/style/layout/_header.scss (line 8, column 14)@ /project/path/custom/plugins/MyTheme/src/Resources/storefront/style/base.scss 2:14-443 21:1-42:3 22:19-448
@ multi ./src/script/main.js ./src/style/base.scss /project/path/custom/plugins/MyTheme/src/Resources/storefront/style/base.scss
Ja, dass ist eine Qual - Ich habe auch noch nicht heraus gefunden, wie man sauber extended.
Das Problem liegt das du die core bootstrap Dateien nicht drin hast.
Meine main.scss sieht wie folgt aus:
@import 'skin/myskin/abstract/variables';
/*
* Vendors
* ------- */
@import 'vendor/bootstrap';
@import 'vendor/tiny-slider';
@import "skin/myskin/.....
.....
Den vendor Ordner habe ich mir aus dem Core theme rüber kopiert. => https://github.com/shopware/platform/tree/master/src/Storefront/Resources/src/style/vendor
hot-reload funktioniert, aber leider nicht der build mode, da bekommst du dann den Fehler:
(3/4) Starting
> bin/console theme:compile
Start theme compilation
In Parser.php line 133:
Unopened { [line no: 7708]
Aber zumindest funzt der hot-reload 
Bei mir findet er relative Pfade nicht - mit bin/console theme:compile gehts:
> sw-next-storefront@1.0.0 hot /home/vagrant/shopware-dev/vendor/shopware/platform/src/Storefront/Resources
> NODE_ENV=development MODE=hot webpack-dev-server --config webpack.config.js
ℹ USING WEBPACK CONFIG FILE: ./build/webpack.hot.config.js
ℹ Compiling Shopware 6 Storefront
✔ Shopware 6 Storefront: Compiled with some errors in 6.75s
ERROR Failed to compile with 8 errors7:47:19 PM
These relative modules were not found:
* ../../../bundles/prefixPlatformPlugin/storefront/font/prefix-Pluginfont.eot?2opjo1 in ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/lib/loader.js!./node_modules/sass-resources-loader/lib/loader.js??ref--8-4!/home/vagrant/shopware-dev/custom/plugins/prefixPlatformPlugin/src/Resources/storefront/style/vendor/font.scss
[...]
@font-face {
[...]
src: url('../../../bundles/prefixPlatformPlugin/storefront/font/prefix-Pluginfont.eot?2opjo1');
}
Hi,
gibt es hier etwas Neues?
Hab nach wie vor das Problem mit den relativen Pfaden zu Assets in den Sass-Files.
Die Pfade auskommentiert, funktioniert alles…
Habe immer noch das Problem mit den relativen Pfaden…
Gibt es hier eine Lösung?
ich hab mir jetzt dadurch beholfen, dass ich dateien in den public-ordner werfe und bin/console install:assets ausführe.
ob dies bei der normalen plugin-installation ausgeführt wird muss ich noch testen
in den original-scss files ist der verweis zu z.b. schriften so drin: url(’#{$asset-path}/…’)
allerdings wird die variable nicht an das theme angepasst sondern gibt immer den pfad zum shopware-basis-theme aus… oder mach ich hier was falsch?
Hat jemand eine Idee wofür der Wert app.request.headers.get(‘hot-reload-mode’) beim isHMRMode ist? Der Value ist bei mit null, aber könnte man den Hot Reload Mode auch irgendwo in der config einschalte? Wozu ist das gedacht?