Importing from node_modules into globals.css

[hollow mica]

I'm suspecting this is not a NextJS question, but I hope no one minds me asking. I found a font package I want to use. It has a node package and it mentions to import the css file that comes bundled. I tried importing it as

import "./node_modules/rpg-awesome/css/rpg-awesome.min.css";

into my root layout.tsx as well as

@import "./node_modules/rpg-awesome/css/rpg-awesome.min.css";

into my global.css. In both cases, it doesn't seem to be able to find the file. Anyone have advice on what I'm doing wrong?

[latent tundra]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[hard rampart]

Only need to import in one place. Import rpg-awesome/css/rpg-awesome.min.css

[hollow mica]

Oh, sorry, I meant I tried each in turn, in case it mattered.

But I didn't realize I don't have to tell it node_modules. That's a confusing bit... I'm guessing that's not a Next thing? More npm? I'm not good with that side of things.

[hard rampart]

Yes that’s just how module resolution works. If it’s inside node_modules it can be imported via the package name.

You can use relative path like you did as well, but it needs to be ../node_modules/… or ../../node_modules/… or something similar, since node_modules is not at the same level as your css file or your root layout file

[hollow mica]

Duh, that makes so much sense. I really appreciate the explaination!