Can't import CSS defined in packages/ui

I've defined a CSS export in the packages.json of packages/ui:

{
  "name": "@repo/ui",
  "version": "0.0.0",
  "private": true,
  "exports": {
    "./constants": "./src/constants/index.ts",
    "./types": "./src/types.ts",
    "./css/*": "./src/css/*.css"
  }
}

When I try to import it in my global layout.tsx:

import './globals.css';
// import '../../../packages/ui/src/css/themes.css'; This works!
import '@repo/ui/css/themes.css';

But I get this error:

Module not found: Can't resolve '@repo/ui/css/themes.css'

What could be the issue?

Also posted here.

You're very close! Adjust your import to:

import '@repo/ui/css/themes';

You don't need the file extension because you're already including this in your package.json exports map!

"./css/*": "./src/css/*.css"
                       ^^^^

If you do want to include the file extension in the import to be explicit (it's nice for readability in my opinion), adjust the exports map to:

"./css/*": "./src/css/*"

And then your original import will work:

import '@repo/ui/css/theme.css';