Next.js Discord

Discord Forum

Importing from node_modules into globals.css

Answered
Lithuanian Hound posted this in #help-forum
Open in Discord
Lithuanian HoundOP
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?
Answered by joulev
Only need to import in one place. Import rpg-awesome/css/rpg-awesome.min.css
View full answer

5 Replies

Answer
Lithuanian HoundOP
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.
@Lithuanian Hound 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.
joulev
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
Lithuanian HoundOP
Duh, that makes so much sense. I really appreciate the explaination!