# Bootstrap entfernen für Custom-Theme Entwicklung

**URL:** <https://forum.shopware.com/t/bootstrap-entfernen-fur-custom-theme-entwicklung/72062>\
**Category:** Themes & Design\
**Created:** [13. Januar 2021 um 10:40 UTC](https://forum.shopware.com/t/bootstrap-entfernen-fur-custom-theme-entwicklung/72062 "2021-01-13T10:40:05Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![tomtomd](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@tomtomd](https://forum.shopware.com/u/tomtomd)\
**Post date:** [22. April 2021 um 10:05 UTC](https://forum.shopware.com/t/bootstrap-entfernen-fur-custom-theme-entwicklung/72062/7 "2021-04-22T10:05:11Z")

</div>

Hi @dbb ich hab mich auch damit beschäftigt (siehe: [Best practices für wirklich individuelle Shops/Themes "from scratch"](https://forum.shopware.com/t/best-practices-fur-wirklich-individuelle-shops-themes-from-scratch/72423))

Das Problem ist, dass der Watch Task komplett über nodeJS/Webpack läuft, sowohl JS als auch SCSS. Beim Build Task z.B. bei `storefront:build` wird nur das JS von Webpack kompiliert. Das SCSS wird über PHP kompiliert mit phpscss. So kann Shopware auch über das Admin immer ein aktuelles CSS Bundle generieren, in dem nur relevantes CSS von aktiven Themes und Plugins enthalten ist. JS muss wie gesagt in einer Umgebung mit nodeJS und dem Build Task kompiliert werden. Dabei wird ein Bundle erzeugt, das dem Theme/Plugin dann beiliegt und von Shopware ebenfalls je nach aktiv/inaktiv injected werden kann.

Wenn du also kontrollieren willst, was bei `storefront:hot-proxy` oder auch bei `storefront:build` als Entrypoint genutzt wird, musst du die Webpack Konfiguration überschreiben.

Dazu musst du unter `/ExamplePlugin/src/Resources/app/storefront/build/` die Datei `webpack.config.js` anlegen. So könnte der Inhalt für ein Theme, dass nur JS und SCSS von sich selbst zulässt aussehen:

```
const path = require('path');
const isHotMode = process.env.MODE === 'hot';

// provide extendable object for building (storefront entrypoints are not inherited by theme.json)
let entry = {};

// force override with function for hot reloading (storefront entrypoints are removed)
if (isHotMode) {
    entry = () => {
        return {
            storefront: [
                path.resolve(__dirname, '../src/main.js'),
                path.resolve(__dirname, '../../../../../../../../var/theme-entry.scss')
            ]
        }
    }
}

module.exports = () => {
    return {
        entry: entry,
        optimization: {
            runtimeChunk: false,
            splitChunks: false
        }
    };
}

```

Für den Build Task wird ein JS Objekt genutzt, das von Shopware Skripten erweitert und gemerged werden kann, da wir die Dependencies hier über die `theme.json` konfigurieren können.

Für den Watch Task überschreibt man die Entrypoints mit einer Funktion. Die kann von den Skripten dann nicht mehr erweitert werden, wirft auch zum Glück soweit keine Fehler.

In der `optimization` muss noch festgelegt werden, das keine Junks erzeugt werden. Das hat natürlich den Nachteil, dass man das Code splitting für das komplette Frontend deaktiviert und das alle Skripte nun beim initialen Laden der Seite geladen werden. Also evtl. keine gute Idee für den Community Store.

Das alles habe ich allerdings in einer `shopware/development` Umgebung gemacht, wie sich das bei den Production Skripten verhält, kann ich dir leider nicht sagen. Bin sehr offen für Verbesserungsvorschläge!

PS: Hast du dir schon mal Shopware PWA angeschaut? [GitHub - vuestorefront/shopware-pwa: Shopware PWA for eCommerce. Headless storefront solution for Shopware 6, which communicates through the SalesChannel-API. Always Open Source, MIT license. Made with by shopware AG & Vue Storefront.](https://github.com/vuestorefront/shopware-pwa) Evtl. der bessere Ansatz für ein ganz eigenes Frontend, bin auch am überlegen.

---

_[View the full topic](https://forum.shopware.com/t/bootstrap-entfernen-fur-custom-theme-entwicklung/72062)._