unocss: transformerDirectives and theme not working in nextjs / webpack

UnoCSS version

0.49.4

Describe the bug

I am trying to use transformerDirectives in my nextjs application that uses webpack. The theme is not taking any effect and the transformer directives does not seem to work.

Reproduction

https://stackblitz.com/edit/nextjs-uvg3hv?file=lib%2Fassets%2Fglobal.scss,pages%2Findex.tsx,unocss.config.ts

Look at lib/assets/globals.scss, styles/globals.css, pages/_app.tsx and pages/index.tsx for the classes applied.

In pages/index.tsx I havde added text-red-500 which works like it should, but text-lavender does not work, even though it has been added to the theme in unocss.config.ts.

System Info

Stackblitz and Linux (NixOS)

Validations

• Read the Contributing Guidelines.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.