# Plugin Assets in SCSS verlinken

**URL:** https://forum.shopware.com/t/plugin-assets-in-scss-verlinken/68478
**Category:** Programmierung
**Created:** [20. Juli 2020 um 12:17 UTC](https://forum.shopware.com/t/plugin-assets-in-scss-verlinken/68478 "2020-07-20T12:17:26Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![codiverse](https://avatars.discourse-cdn.com/v4/letter/c/b782af/32.png) [@codiverse](https://forum.shopware.com/u/codiverse)
#### Post date: [20. Juli 2020 um 12:17 UTC](https://forum.shopware.com/t/plugin-assets-in-scss-verlinken/68478/1 "2020-07-20T12:17:26Z")

</div>

Hallo zusammen,

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

> **[Shopware 6: Assets](https://docs.shopware.com/en/shopware-platform-dev-en/developer-guide/storefront/assets)**

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?

---

<div class="post-metadata">

### Author: ![Hoargarth](https://avatars.discourse-cdn.com/v4/letter/h/82dd89/32.png) [@Hoargarth](https://forum.shopware.com/u/Hoargarth)
#### Post date: [21. Juli 2020 um 08:48 UTC](https://forum.shopware.com/t/plugin-assets-in-scss-verlinken/68478/2 "2020-07-21T08:48:31Z")

</div>

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');

```

&nbsp;

---

<div class="post-metadata">

### Author: ![ireznik](https://avatars.discourse-cdn.com/v4/letter/i/c89c15/32.png) [@ireznik](https://forum.shopware.com/u/ireznik)
#### Post date: [21. Juli 2020 um 09:38 UTC](https://forum.shopware.com/t/plugin-assets-in-scss-verlinken/68478/3 "2020-07-21T09:38:39Z")

</div>

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
```

---

<div class="post-metadata">

### Author: ![codiverse](https://avatars.discourse-cdn.com/v4/letter/c/b782af/32.png) [@codiverse](https://forum.shopware.com/u/codiverse)
#### Post date: [21. Juli 2020 um 12:04 UTC](https://forum.shopware.com/t/plugin-assets-in-scss-verlinken/68478/4 "2020-07-21T12:04:43Z")

</div>

Hi @Hoargarth‍,

danke, das hat funktioniert! 🙂

&nbsp;

---

<div class="post-metadata">

### Author: ![codiverse](https://avatars.discourse-cdn.com/v4/letter/c/b782af/32.png) [@codiverse](https://forum.shopware.com/u/codiverse)
#### Post date: [29. Juli 2020 um 11:02 UTC](https://forum.shopware.com/t/plugin-assets-in-scss-verlinken/68478/5 "2020-07-29T11:02:09Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![myshoptheme](https://avatars.discourse-cdn.com/v4/letter/m/4da419/32.png) [@myshoptheme](https://forum.shopware.com/u/myshoptheme)
#### Post date: [7. Oktober 2021 um 11:16 UTC](https://forum.shopware.com/t/plugin-assets-in-scss-verlinken/68478/6 "2021-10-07T11:16:51Z")

</div>

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:

```auto
$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:

```auto
$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:

```auto
$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](https://issues.shopware.com/issues/NEXT-10560)

**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:

```auto
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?
