How do I lazily load stylesheets for different pages

I have a single page application with solid router: I have different routes loaded like this

const About = lazy(() => import('./about'))
const MainPage = lazy(() => import('./home'))
const Hardcore = lazy(() => import('./hardcore'))

const About = lazy(() => import('./about'))
const MainPage = lazy(() => import('./home'))
const Hardcore = lazy(() => import('./hardcore'))

and in hardcore.tsx load a stylesheet

import './hardcore.scss'

import './hardcore.scss'

But in another page load a different stylesheet. But styles get mixed between pages, I think they don't get unloaded or something, how do I reset the previous pages styles, or whatever method I should use.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How do I lazily load stylesheets for different pages