Unimporting CSS? | Vite Land | Page 1

granite canopy Dec 13, 2024, 12:12 AM

#

I have some CSS I am importing like this:

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/display.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/padding.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';

It's in a React component.

Does anyone know a way to have this CSS be removed when the component is unmounted?

crimson sequoia Dec 13, 2024, 2:48 AM

#

granite canopy I have some CSS I am importing like this: ```tsx /* Core CSS required for Ionic...

I'd like to ask you, why you're trying to achieve this?
If the css has been loaded it's already downloaded at the client ready to go. Requiring an unload for technical reasons could indicate a critical code flaw that needs to be reworked.

manic iron Dec 14, 2024, 2:26 AM

#

granite canopy I have some CSS I am importing like this: ```tsx /* Core CSS required for Ionic...

Seems like you could be looking for dynamic ?url import that encompases of those imports:

useEffect(() => {
  import('./ionic.css?url').then(mod => {
    const cssUrl = mod.default
    // add your <link> tag to <head> maybe
  })
  return () => {
    // remove your <link> tag
  }
}, [])

This will only work client-side, though, both adding and removing the styles, which is something that I'm not very fond of, but it's your wish 😃

#Unimporting CSS?