Handle alias for @reference within css module to prevent from long relative path

[radonirinamaminiaina]

Hello Team,
I'm running into a long relative path issue with CSS @reference in a Next.js 15 & Shadcn/ui v4 project.

I have a file in app/(group)/path/subpath/sections that needs to reference globals.css, which requires @reference "../../../../globals.css".

Is there a way, or are there plans, to support path aliases like @/ within these @reference directives? Using @reference "@/globals.css" would be much cleaner.

Regards

[wongjn]

You could consider using subpath imports:

// package.json
{
  …
  "imports": {
    "#globals.css": "./path/to/globals.css"
  },
  …
} 

@reference "#globals.css";

[radonirinamaminiaina]

Thank you @wongjn, it works.

May be tailwind team needs to add this into the documentation.