Different CSS for routes

[nickngqs]

Hi,

I have a customer facing website with a admin as well.

I want to split the CSS depending on the route.

For e.g /admin, I'm using an existing UI library,
while the custom facing website e.g /products, there will be another styles involved.

How to I make sure these css don't have conflicts ?

[BassOfBass]

Give the class to wrapper div in the related pages, so /admin pages will have one class, while /products - another. Then write rules inside those classes.

[nickngqs]

Yeah, I guess thats the only way for now. But I don't think its very clean, because firstly you increased the size and the specificity and you also can't exactly control all third parties css styles. But i did managed to do so for my third party ones.

[oyed]

@nickngqs You can use different layouts per page. E.g. for Admin-specific pages, specify layout: 'admin', in the page. This layout can include/not include anything you'd like, wherease the default could include the site-specified resources.

[dKab]

except once you loaded one layout it's css will stay and won't be removed when you navigate to a page with a different layout and the styles imported by the first layout can leak (if they are global).

[manniL]

That's correct and normal for components. See this issue

[dKab]

Thanks for the reply @manniL . Maybe you could advise on how can I isolate global css styles added by a design system so that some of the routes weren't affected by them. We are using global styles from design system, which we are including via css in nuxt.config.ts. Now we are building a new module/feature, which will use new design system, and we don't want styles from the old design system to leak there. I was even considering extracting this new module into another nuxt app to achieve that, but after discovering this discussion I learned about layers. Do you think layers can help me with my problem?

[manniL]

I don't think layers might help as the CSS will be "merged" anyway.

[dKab]

thanks for the reply!