# ThirdParty: Owl-Carousel einbinden

**URL:** <https://forum.shopware.com/t/thirdparty-owl-carousel-einbinden/85773>\
**Category:** Themes & Design\
**Created:** [8. März 2021 um 10:42 UTC](https://forum.shopware.com/t/thirdparty-owl-carousel-einbinden/85773 "2021-03-08T10:42:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tneumann](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@tneumann](https://forum.shopware.com/u/tneumann)\
**Post date:** [8. März 2021 um 10:42 UTC](https://forum.shopware.com/t/thirdparty-owl-carousel-einbinden/85773/1 "2021-03-08T10:42:43Z")

</div>

Hallo,  
ich versuche derzeit das OWL-Carousel in meinem Plugin einzubinden.  
Leider habe ich hier einige Probleme beim einbinden der SCSS. JavaScript funktioniert.

Ich habe es derzeit nur in Produktion hinbekommen, dass er die CSS Dateien richtig lädt.  
Wenn ich es aber per make watch-storefront lokal aufrufen möchte kann er die SCSS von Owl nicht mehr auflösen.

**Meine package.json**  
{  
„name“: „storefront“,  
„version“: „1.0.0“,  
„description“: „CUSTOM Plugins“,  
„main“: „index.js“,  
„scripts“: {  
„test“: „echo „Error: no test specified“ && exit 1“  
},  
„dependencies“: {  
„owl.carousel“: „^2.3.4“,  
}  
}

**Meine webpack.config.js**  
const path = require(‚path‘);

module.exports = (params) =\> {  
return {  
resolve: {  
modules: [  
path.resolve(\_\_dirname, ‚…/node\_modules‘),  
],  
alias: {  
tmagNodeModules: path.resolve(\_\_dirname, ‚…/node\_modules‘)  
}  
}  
}  
}

**Meine main.js**  
import ‚owl.carousel‘;

Meine base.scss  
$owl-image-path: „~owl.carousel/src/img/“;  
$owl-image-path: „~tmagNodeModules/owl.carousel/src/img/“;

```
@import "custom/plugins/CUSTOM_PLUGIN/src/Resources/app/storefront/node_modules/owl.carousel/src/scss/owl.carousel";

@import "./base/typography";

```

Wenn ich z.B. den custom/plugins/CUSTOM\_PLUGIN … ersetze durch den definierten alias tmagNodeModules laufen alle Commands durch, aber die all.css versucht dann per url(~tmagNodeModule) zu Laden die natürlich nicht existiert…

Zusammengefasst:

Was muss genau gemacht werden, damit dass SCSS von ThirdParty Plugins ordnungsgemäß funktioniert.  
Die Dokus [Shopware 6: Using custom CSS and JavaScript in the Storefront](https://docs.shopware.com/en/shopware-platform-dev-en/how-to/storefront-assets) order [Shopware 6: Assets](https://docs.shopware.com/en/shopware-platform-dev-en/developer-guide/storefront/assets) bringen einen leider nicht weiter.

---

<div class="post-metadata">

**Author:** ![tneumann](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@tneumann](https://forum.shopware.com/u/tneumann)\
**Post date:** [8. März 2021 um 11:29 UTC](https://forum.shopware.com/t/thirdparty-owl-carousel-einbinden/85773/2 "2021-03-08T11:29:18Z")

</div>

Ich bin schon etwas weitergekommen.  
Wenn ich Symfony Environment auf dev setze und die base.scss folgendermaßen anpasse funktioniert es in DEV.

```
 $owl-image-path: "~owl.carousel/src/img/";
 @import "~owl.carousel/src/scss/owl.carousel";

@import "base/typography";

```

In PROD Environment versucht er in der all.css folgendes  
`@import url("~owl.carousel/src/scss/owl.carousel");`

Diese URL kennt er natürlich nicht.

Wie kann ich dies lösen?

---

<div class="post-metadata">

**Author:** ![tneumann](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@tneumann](https://forum.shopware.com/u/tneumann)\
**Post date:** [8. März 2021 um 12:50 UTC](https://forum.shopware.com/t/thirdparty-owl-carousel-einbinden/85773/3 "2021-03-08T12:50:33Z")

</div>

Ich habe das mal als Ticket aufgegeben, da ich denke das dies ein Bug im PROD Modus ist.

> **[Shopware Issuetracker](https://issues.shopware.com/issues/NEXT-14098)**

Falls jemand eine Lösung hat und ich falsch liege gerne her damit 🙂

---

<div class="post-metadata">

**Author:** ![sawden](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@sawden](https://forum.shopware.com/u/sawden)\
**Post date:** [8. September 2021 um 20:02 UTC](https://forum.shopware.com/t/thirdparty-owl-carousel-einbinden/85773/4 "2021-09-08T20:02:46Z")

</div>

Wow also kann man seit 6 Monaten kein scss aus den node\_modules einbinden? 😅

Das kann doch jetzt nicht ernsthaft ein Bug sein… 😐

---

<div class="post-metadata">

**Author:** ![mson](https://avatars.discourse-cdn.com/v4/letter/m/5daacb/32.png) [@mson](https://forum.shopware.com/u/mson)\
**Post date:** [10. Dezember 2021 um 10:53 UTC](https://forum.shopware.com/t/thirdparty-owl-carousel-einbinden/85773/5 "2021-12-10T10:53:02Z")

</div>

Konntet ihr das mittlerweile lösen? Ich versuche eine (bereits kompilierte) css-Datei eines node modules in mein Theme einzubinden, @import „~js-year-calendar/dist/js-year-calendar“; in meiner base.scss wird im Browser aufgelöst zu /theme/500499f009289e33498b56e7958e5629/css/~js-year-calendar/dist/js-year-calendar, was einen 404-Fehler wirft.