Dynamically loading/unloading CSS based on route

I’d like to use a CSS framework (Semantic-UI) for one of my routes/components, but if I leave it permanently it messes with the layout of other routes/pages I’ve already built without it.

Is there an “elegant” way to load in or “activate” a CSS file on route change and then remove it again upon another route change?



If you want to avoid leaking styles from within that component to the outside, afaik you basically have two options:

<require from="./styles.css" as="scoped"></require>

  1. Include styles inline with the component template and use shadow dom to encapsulate the component with @useShadowDOM():


1 Like

Thanks, I’ll give that a shot.

1 Like