Plugin Assets in SCSS verlinken

Shopware 6 (German) Programmierung
1

Hallo zusammen,

ich bekomme ein Image nicht korrekt im Frontend verlinkt. Ich orientiere mich hier:

Bild liegt im

Resources
    │ ├── public

Ordner. Anschließend habe ich bin/console asset:install ausgeführt, damit die Assets umkopiert werden. Nun liegt das Bild auch in:

development/public/bundles/myplugin/img/sprite.png

Wie verlinke ich es nun korrekt im SCSS?

 background-image: url('../bundles/myplugin/img/sprite-icons-dtgs-account-docs.png');

funktioniert nicht…

Hat jemand einen Tipp?

2

Hi codiverse,

dein kompiliertes CSS liegt zusammen mit allem anderen im public ordner.
Dein Plugin-Bundle wird in der Regel eins zu eins in den Public Ordner unterhalb deines Plugins kopiert.
Die URL zu deinem Bild kann also dementsprechend wie folgt aussehen:

/bundles/myplugin/img/sprite-icons-dtgs-account-docs.png

Ich schreibe mir hierfür meistens eine Variable die den Bundle-Pfad meines Plugins beinhaltet, dann kannst du dir das bischen abkürzen.

$mypluginBundlePath: '/bundles/myplugin/'

background-image: url($mypluginBundlePath + 'img/sprite-icons-dtgs-account-docs.png');

 

1 „Gefällt mir“
3

Ich mache das für fonts aktuell im Theme so:

url('#{$asset-path}/font/fontname/font.woff')

in der overrides.scss schreibe ich folgendes:

$asset-path: '/bundles/<themename>/storefront/assets';</themename>

die assets kann man dann mittels console kopieren lassen:

bin/console assets:install
4

Hi @Hoargarth‍,

danke, das hat funktioniert! :slight_smile:

 

5

Hi,

noch ein Nachtrag. Mit dem Code von @Hoargarth‍ klappt es nicht, wenn das Plugin in einem Unterordner installiert ist. Ich habe es nun so angepasst:

 $mypluginBundlePath: '../../../bundles/myplugin/';

Hoffe es hilft jemandem.

6

Moin @codiverse

ich möchte das nochmal aufgreifen.
Auch der Pfad ../../../bundles/myplugin/ ist problematisch, da er nicht zusammen mit dem hot reload mode funktioniert. Es erscheint die Fehlermeldung:

This relative module was not found: * ../../../bundles/ [...]

Ich habe mir daher das Ganze einmal näher angeschaut.
Shopware selbst definiert sich eine Variable zur Einbindung der Inter-Font:

$app-css-relative-asset-path: '../assets' !default;

In Verbindung mit dem Hot-Reload Mode wird die Variable in \vendor\shopware\storefront\Resources\app\storefront\webpack.config.js) umgeschrieben:

$app-css-relative-asset-path: '/bundles/storefront/assets'

Dieser Pfad dürfte im Hot-Reload Modus zwar nicht bemängelt werden, in der Ausgabe in einem Shop in einem Unterverzeichnis aber auch nicht zum Ziel führen.

In Shopware 6.4.x gibt es aber nun noch ein paar neue Variablen:

$sw-asset-public-url;
$sw-asset-theme-url;
$sw-asset-asset-url;
$sw-asset-sitemap-url;

Diese enthalten als Wert die absolute URL des Verkaufskanals (?). Da gab es bis vor kurzem noch den Bug: Shopware Issuetracker

Frage 1: Warum haben diese vier Variablen alle den selben Wert, wozu gibt es diese vier(!) Variablen und nicht nur eine.
Frage 2: Kann man in SCSS irgebndwie feststellen, ob man sich im Hot Reload Modus befindet und die Variable ebenfalls umschreiben?
Frage 3: Spricht etwas dagegen eine dieser Variablen zu verwenden:

url('#{$sw-asset-theme-url}/bundles/myplugin

Das funktioniert nun im Hot-Reload, im Live-Betrieb, mit und ohne Installation in einem Unterorder. Ist das vll. die Lösung?

1 „Gefällt mir“