Search code examples
webpackshopware

Shopware 6: bin/watch-storefront.sh does not show our custom theme


We are using the ManuTheme and bin/watch-storefront.sh. (Production template, for a customer shop)

But the site shown using the Webpack Proxy is looking very different from what we normally see.

One theory is that the theme's files are not beeing loaded? Is this true? Is there additional work needed to load all the theme files when using watch-storefront?

In the Webpack output all Theme Modules are listed:

# Webpack Plugin Injector: Plugin "Storefront" injected as a new entry point
# Webpack Plugin Injector: Plugin "ExampleProductListing" injected as a new entry point
# Webpack Plugin Injector: Plugin "DmfManuTheme" injected as a new entry point
# Webpack Plugin Injector: Plugin "dev24PriceFilterRangeSlider" injected as a new entry point

But some CSS is just missing. We checked whether files cannot be loaded, but there are no errors in the network tab.

When we open the page normally (without the Webpack Proxy) there is

.main-newsletter {
    background: #cddd5d;
    color: #242424;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

This comes from the theme. But when we open it via the webpack proxy, this is missing.

Is this maybe expected behavior? How can this be further debugged?

We also tried changing bin/watch-storefront.sh

npm --prefix vendor/shopware/storefront/Resources/app/storefront/ run-script hot-proxy

to

npm --prefix vendor/store.shopware.com/dmfmanutheme/src/Resources/app/storefront run-script hot-proxy

But then it does not even start up.


Solution

  • Make sure all css files are referenced in the base.scss. The current version only loads the base.scss while older verisons did load all files.

    Maybe your theme is not ready for version 6.4

    See: https://github.com/shopware/platform/blob/6.4.0.0/UPGRADE-6.4.md#changed-the-loading-of-storefront-scss-files-in-extensions