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?

2 Likes

Hi!

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():
<template>
   <style>
   </style>
   <content>
   </content>
</template>

Best

1 Like

Thanks, I’ll give that a shot.

1 Like