Today we discovered, that the typo and font sizes we configure in our theme aren’t displayed in the frontend.
What we did:
- We bought a theme (A) from the Shopware store
- We created a theme (B) to override templates, JavaScript and (S)CSS which inherit from A
- We created a bunch of themes (C) to configure B without changing each other (which don’t have anything except a theme.json more or less)
TL;DR Solution is below.
But if we attach C to a sales channel, all the configuration isn’t used in the frontend. Our frontend developer Carl discovered, that the necessary scss code to apply the configuration to the style can be found in the override.scss
file of A. If we copy the content to C everything works fine, so our assumption is, that everything of the style will be applied to C except the override.scss
file of A and B.
The cheap solution is to copy the content of the override.scss
to all C’s but this isn’t future proof. If anything changes on our bought theme, we need to update all override.scss
.
This is a known issue at least in the community – I haven’t found a ticket for this, but after thinking about it, I think it is intended behaviour and it makes sense to NOT include the override.scss
implicitly.
Solution
So if we don’t want to copy the content over we need to somehow tell Shopware to include the override.scss of A. These kind of things we do with the theme.json
file of your theme (C).
So here is our example to make it work for us:
{ "style": [ "../../../../../vendor/store.shopware.com/A/src/Resources/app/storefront/src/scss/overrides.scss", "app/storefront/src/scss/overrides.scss", "@Storefront", "@A", "@B", "app/storefront/src/scss/base.scss" ], }
In our case A is installed via composer, therefore it lives in /vendor/
while B and C are custom themes and therefore live in /custom/static-plugins/
– so depending on this you might need to change the path. And make sure the path is relative, or it might break on stage and/or production.