Different global css for different routes

[rose onyx]

Hi,
So I want to use different global css for my '/' route and '/admin/'.
I've checked some tutorials online, but non of them seems to be working anymore - Every time i still get same error:
next.js Global CSS cannot be imported from files other than your Custom <App>
Whats the best practice here?

[mighty bay]

Hey Cheebamba

what you can do is create a scoped style per route.

styles for pages I usually place under /styles/Page1.module.scss

then you can do something like this

import s from '../styles/Page1.module.scss'

const Page1 = () => {
  return (
     <div className={s.root}>
        .. Content of the page here
     </div>
  )
}

[rose onyx]

and what if I want to use tailwind on the admin and something else on the front?

[edgy bone]

You can import the global.css or tailwind on _app.js for centering global style

[rose onyx]

but I dont want tailwind globally - only for /admin routes

[fluid nymph]

probably a good timing to introduce 2 apps

instead of one admin area within the app

[rose onyx]

I'll guess I'll go with that. Thanks

[rich ermine]

@rose onyx I'm using antd only in my admin part of the app, here's how I did to selectively import antd.css for my admin route. Hope it helps

• Create a dynamic Component that import the css
• Check for admin route in _app render
• only use that new dynamic component if isAdmin

[rose onyx]

Thanks!