# Einbindung von externem CSS / JS in die Storefront

**URL:** <https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433>\
**Category:** Programmierung\
**Created:** [3. Februar 2020 um 10:23 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433 "2020-02-03T10:23:53Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![netzperfekt](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/netzperfekt/32/7765_2.png) [@netzperfekt](https://forum.shopware.com/u/netzperfekt)\
**Post date:** [3. Februar 2020 um 10:23 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/1 "2020-02-03T10:23:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AlexGalax](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/alexgalax/32/9925_2.png) [@AlexGalax](https://forum.shopware.com/u/AlexGalax)\
**Post date:** [4. Februar 2020 um 08:46 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/2 "2020-02-04T08:46:03Z")

</div>

> **[Shopware 6: Using custom CSS and JavaScript in the Storefront](https://docs.shopware.com/en/shopware-platform-dev-en/how-to/storefront-assets?category=shopware-platform-dev-en%2Fhow-to)**

---

<div class="post-metadata">

**Author:** ![Moorleiche](https://avatars.discourse-cdn.com/v4/letter/m/6f9a4e/32.png) [@Moorleiche](https://forum.shopware.com/u/Moorleiche)\
**Post date:** [4. Februar 2020 um 09:17 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/3 "2020-02-04T09:17:26Z")

</div>

[https://github.com/shopware/platform/issues/136](https://github.com/shopware/platform/issues/136)

---

<div class="post-metadata">

**Author:** ![netzperfekt](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/netzperfekt/32/7765_2.png) [@netzperfekt](https://forum.shopware.com/u/netzperfekt)\
**Post date:** [4. Februar 2020 um 09:27 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/4 "2020-02-04T09:27:54Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![AlexGalax](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/alexgalax/32/9925_2.png) [@AlexGalax](https://forum.shopware.com/u/AlexGalax)\
**Post date:** [4. Februar 2020 um 10:02 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/5 "2020-02-04T10:02:49Z")

</div>

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"
  ],

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![netzperfekt](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/netzperfekt/32/7765_2.png) [@netzperfekt](https://forum.shopware.com/u/netzperfekt)\
**Post date:** [4. Februar 2020 um 10:42 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/6 "2020-02-04T10:42:26Z")

</div>

@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](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

---

<div class="post-metadata">

**Author:** ![AlexGalax](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/alexgalax/32/9925_2.png) [@AlexGalax](https://forum.shopware.com/u/AlexGalax)\
**Post date:** [4. Februar 2020 um 11:31 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/7 "2020-02-04T11:31:44Z")

</div>

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

```

&nbsp;

---

<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 11:08 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/8 "2021-12-10T11:08:52Z")

</div>

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](https://issues.shopware.com/issues/NEXT-14098=)

@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](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](https://www.shopware.com/de/news/eigene-abhaengigkeiten-per-npm-installieren/) und das Importieren des JavaScripts in meiner main.js ging ohne Probleme. Aber CSS bekomme ich nicht hin.

Was mach ich falsch?

---

<div class="post-metadata">

**Author:** ![RafaelKr](https://avatars.discourse-cdn.com/v4/letter/r/4af34b/32.png) [@RafaelKr](https://forum.shopware.com/u/RafaelKr)\
**Post date:** [24. Januar 2022 um 16:05 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/9 "2022-01-24T16:05:06Z")

</div>

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:

```bash
# 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:

```auto
@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";

```

---

<div class="post-metadata">

**Author:** ![JMaierNBB](https://avatars.discourse-cdn.com/v4/letter/j/f19dbf/32.png) [@JMaierNBB](https://forum.shopware.com/u/JMaierNBB)\
**Post date:** [29. März 2023 um 07:50 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/10 "2023-03-29T07:50:35Z")

</div>

Ich habe hier noch einen nennenswerten Ansatz über Webpack!  
Buildkonfiguration `Resources/app/storefront/build/webpack.config.js` anlegen:  
a)

```js
module.exports = function useSass() {
    return {
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'sass-loader'
                    ]
                }
            ]
        }
    }
};

```

Diese Variante ist zum Entwicklen ganz praktisch. Der Style Loader injeziert Styletags, jetzt lässt sich zum Beispiel `import 'normalize.css'` in der main.js hinzufügen und der Style wird beim Laden hinzugefügt.

Da fehlt aber dann noch die Minifizierung für Production!  
b)

```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // pin to v1.6.2 for webpack4
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); // pin to v1.3.0 for webpack4

module.exports = function useSassWithMinification() {
    return {
        module: {
            rules: [
                {
                    test: /.s?css$/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
                },
            ],
        },
        optimization: {
            minimizer: [
                new CssMinimizerPlugin(),
            ],
        },
        plugins: [new MiniCssExtractPlugin()],
    };
};

```

Damit wird der (S)CSS Code der `all.css` angehängt.

Gleichzeitig hat mir dies auch trotzdem geholfen, das ist auch besser für andere Imports (außer node\_modules),

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

---

<div class="post-metadata">

**Author:** ![JMaierNBB](https://avatars.discourse-cdn.com/v4/letter/j/f19dbf/32.png) [@JMaierNBB](https://forum.shopware.com/u/JMaierNBB)\
**Post date:** [4. April 2023 um 08:54 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/11 "2023-04-04T08:54:31Z")

</div>

Schade, das funktioniert leider nicht, ich hatte mir nur eingebildet das CSS am Ende der all.css vorzufinden.  
Werde aus Zeitgründen auch erstmal auf den src/scss/external Workaround zurückgreifen statt weiter nach einer echten Webpack Lösung zu suchen.

---

<div class="post-metadata">

**Author:** ![JMaierNBB](https://avatars.discourse-cdn.com/v4/letter/j/f19dbf/32.png) [@JMaierNBB](https://forum.shopware.com/u/JMaierNBB)\
**Post date:** [4. April 2023 um 16:11 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/12 "2023-04-04T16:11:41Z")

</div>

Nachdem wir jetzt mein Webpack Verbesserungen reverted hatten, sieht die Lösung für uns (mit Shopwares PHP Sass Compiler) so aus:

```scss
// src/Bundle/Storefront/Resources/app/storefront/src/scss/base.scss
@import "../../../../../../../../node_modules/glightbox/dist/css/glightbox";
@import "../../../../../../../../node_modules/normalize.css/normalize";

```

```json
// src/Bundle/Storefront/Resources/app/storefront/package.json
    "dependencies": {
        "glightbox": "^3.2.0",
        "normalize.css": "^8.0.1"
    }
// (yarn workspace package, common lockfile, no nohoist)

```

---

<div class="post-metadata">

**Author:** ![loon](https://avatars.discourse-cdn.com/v4/letter/l/51bf81/32.png) [@loon](https://forum.shopware.com/u/loon)\
**Post date:** [28. August 2024 um 15:45 UTC](https://forum.shopware.com/t/einbindung-von-externem-css-js-in-die-storefront/64433/13 "2024-08-28T15:45:25Z")

</div>

WER programmiert „sowas“? …diese Suche nach Workarounds bei Shopware ist extrem Zeit- und damit auch Kostenintensiv. Wow.