How to split styles in shopware 6?

Question

I wonder how you would do code-splitting (e.g. by page-type) especially for CSS in Shopware 6 storefront. Right now everything gets bundled into one big all.css. But I think it's not that smart that a user has to load styles for example for the checkout on his first visit on let's say the home page.
I imagine something like different entrypoints, for example product.scss, checkout.scss etc.
Is there a inbuilt way to do this?

Jeannettajeannette

there is nothing to do this out of the box. it would need some customization – Odrick

@MichaelT I came to the same conclusion and I already started to customize it. Maybe it will result in a PR to at least be able to opt-in into such a behaviour :) – Jeannettajeannette

that sounds good! – Odrick

It should be possible to extend the webpack config to add multiple compiled css files and remove all.css. For example CMS, Category, PDP, Checkout and Common (last one got styles which are used everywhere). Then of course you have to add those .scss files and import the needed parts for each. Then in base twig file, remove all.css and add the correct new css files depending on the route you are in. Haven't done it yet mysel, but should be possible. Just a ton of work to do. – Floret