Einbindung von externem CSS / JS in die Storefront

Wie kann ich CSS / JS von JS-Plugins von Drittanbietern in die Storefront integrieren? Das muss wirklich statisch erfolgen, npm etc. geht nicht (und bitte auch nicht in die Template per

https://github.com/shopware/platform/issues/136

@AlexGalax‍ danke, aber *genau das* funktioniert nicht. scss: ok, eigenes .js-modul: ok.
ich brauche aber die einbindung von dritt-js / css, die liegen als minified.css/.js vor und müssen eingebunden werden. npm scheidet leider aus.

Ess seht doch alles in der Doku. Erstelle ein neues Theme als Plugin. Und in der theme.json kannst du das all deine Dateien angeben:

  "style": [
    "app/storefront/src/scss/plugin.min.css",
    "@Storefront",
    "app/storefront/src/scss/theme.scss"
  ],
  "script": [
    "@Storefront",
    "app/storefront/dist/storefront/js/theme.js",
    "app/storefront/dist/storefront/js/plugin.min.js"
  ],
  "asset": [
    "app/storefront/src/assets"
  ],

 

@AlexGalax‍ es geht um ein Plugin, nicht um ein Theme, und es funktioniert eben nicht wie beschrieben

[@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski „Moritz Naczenski“)‍ kannst du helfen? ich komme hier wirklich nicht weiter und kann unsere plugins so nicht migrieren

Ein Theme ist auch nur ein Plugin und damit funktioniert es ohne Probleme.

Ohne theme.json brauchst du die js-Dateien doch nur im richtigen ordner unterbringen

For 6.1.0 RC and above the default path where shopware looks for your js files is Resources/app/storefront/dist/storefront/js.

Und CSS kannst du auch in scss einbinden

By default, Shopware looks in the /src/Resources/app/storefront/src/scss folder of your plugin to load a base.scss file.

dort deine Dateien einbinden

@import 'path/to/custom.min.css';

 

Wie binde ich CSS von einem node module ein?

@import „~js-year-calendar/dist/js-year-calendar“; funktioniert nicht, weil es versucht das über url() einzubinden anstatt es in die all.css zu kompilieren (siehe auch Shopware Issuetracker

@import „…/…/node_modules/js-year-calendar/dist/js-year-calendar.css“; funktioniert nicht, weil es das im Browser zu https://meineurl.de/theme/node_modules/js-year-calendar/dist/js-year-calendar.css auflöst.

Den Pfad zur css-Datei in der theme.json angeben funktioniert auch nicht, weil das im Browser zum absoluten Serverpfad gewandelt wird.

Ich bin gemäß dem Blogeintrag vorgegangen: Eigene Abhängigkeiten per NPM installieren | Shopware und das Importieren des JavaScripts in meiner main.js ging ohne Probleme. Aber CSS bekomme ich nicht hin.

Was mach ich falsch?

1 Like

Hi @mson, das Problem hatte ich eben auch, ich verwende jetzt einen hässlichen (aber funktionierenden) Workaround. Statt js-year-calendar ist es bei mir aber Bootstrap 5 (bitte frage nicht, warum ich Teile von Bootstrap 5 inkludieren muss…).

Ich habe mir in meinem Theme die Datei src/Resources/app/storefront/src/scss/external/package.json angelegt und dort installiere ich meine dependencies. Außerdem habe ich eine src/Resources/app/storefront/src/scss/external/.gitignore mit dem folgenden Inhalt:

# make sure node_modules folder isn't ignored on this level...
!node_modules
# ... but ignore everything inside
node_modules/*

# unignore bootstrap stylings
!node_modules/bootstrap
node_modules/bootstrap/*
!node_modules/bootstrap/scss/
!node_modules/bootstrap/scss/*
!node_modules/bootstrap/scss/**/*

Dadurch kann ich es nun wie folgt verwenden:

@import "external/node_modules/bootstrap/scss/functions";
@import "external/node_modules/bootstrap/scss/variables";

@import "external/node_modules/bootstrap/scss/mixins";
@import "external/node_modules/bootstrap/scss/utilities";

@import "external/node_modules/bootstrap/scss/grid";