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'))

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

hardcore.tsx

hardcore.tsx

hardcore.tsx load a stylesheet

import './hardcore.scss'

import './hardcore.scss'

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.

No replies yetBe the first to reply to this messageJoin

How do I lazily load stylesheets for different pages

Similar Threads

Similar Threads

Similar Threads