nuxt-windicss icon indicating copy to clipboard operation
nuxt-windicss copied to clipboard

Pug classes doesn't work in Nuxt3

Open xxSkyy opened this issue 3 years ago • 3 comments

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 🤷🏼‍♂️

xxSkyy avatar Dec 11 '21 13:12 xxSkyy

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

jbmolle avatar Dec 16 '21 17:12 jbmolle

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

You're right, I've updated issue

xxSkyy avatar Dec 17 '21 02:12 xxSkyy

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']
      }]
    }
  }
}

jbmolle avatar Dec 17 '21 10:12 jbmolle