nuxt-windicss
nuxt-windicss copied to clipboard
Pug classes doesn't work in Nuxt3
I don't know if it's bug or it's not implemented but in Nuxt3 pug templates classes doesn't work in any case
.bg-red-500.p-2 Text
or
div(class="bg-red-500 p-2") Text
doesn't work, only html
for repro just take any actual nuxt3 + windicss sandbox add pug and pug-plain-loader dependencies and convert template to pug. it won't load any class
Edit:
div(class="bg-red-500 p-2") Text
seems to work, it didn't few days ago or I din't notice it works 🤷🏼♂️
I've tested it and it seems that the class syntax works but Pug syntax doesn't.
p(class="text-red-600") My Text will show correctly a red text.
But p.text-red-600 My Text doesn't show the red text
I've tested it and it seems that the class syntax works but Pug syntax doesn't.
p(class="text-red-600") My Textwill show correctly a red text. Butp.text-red-600 My Textdoesn't show the red text
You're right, I've updated issue
The problem comes from require('pug') in getDefaultExtractors function.
One solution is to add the following to your nuxt.config.ts
import { PugExtractor } from 'vite-plugin-windicss
And then
windicss: {
config: {
extract: {
extractors: [{
extractor: PugExtractor,
extensions: ['vue', 'pug']
}]
}
}
}