ThirdParty: Owl-Carousel einbinden

Shopware 6 (German) Themes & Design
1

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 order Shopware 6: Assets bringen einen leider nicht weiter.

2

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?

3

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

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

1 „Gefällt mir“
4

Wow also kann man seit 6 Monaten kein scss aus den node_modules einbinden? :sweat_smile:

Das kann doch jetzt nicht ernsthaft ein Bug sein… :neutral_face:

5

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.