What's the best way to import CSS from node_modules?

[christian-reichart]

I'm using https://splidejs.com/integration/react-splide/ in my Remix project.

The regular way would be to import css as follows:
import '@splidejs/react-splide/css/core';

What would be the Remix way of doing this?
Thanks for any help.

[kiliman]

That's kind of the correct way to import CSS from node_modules. First you have to make sure you are importing an actual CSS file. Unlike WebPack, Remix only supports raw imports. You may have to dig around in node_modules to find the CSS file.

Also remember that Remix only returns the URL for that asset. You still need to export a links function so Remix knows to serve that CSS to the user.

// import the asset (splideCss is the URL like /build/_assets/splide.css)
import splideCss from '@splidejs/react-splide/dist/css/splide-core.min.css'

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: splideCss }
]

[christian-reichart]

Figured out that it only works with splide/dist instead of react-splide/dist even though I only have react-splide installed. Thanks for your answer though! @kiliman

[appsparkler]

For me, this did not work:

import styles from 'my-library/dist/style.css'

so I had to:

import styles from 'node_modules/my-library/dist/style.css'`