nuxt-fontawesome: Missing classes after production build

Classes like: svg-inline--fa fa-adjust fa-w-16

Using yarn v1.13.0

Are not included in final css file after build. Test with boilerplate from https://github.com/sgraewe/nuxt-tailwind

When in development mode with yarn dev, classes are part of the vendors.app.css But when build for production .fa-* classes are not included

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 5
  • Comments: 21 (4 by maintainers)

Most upvoted comments

This solution is just a workaround. With whitelistPatterns you are losing the main idea of purgeCSS. All nuxt-fontawesome styles will be applied to your build, even those unused. So we have to find a way to include those styles correctly and remove unused with purgeCSS package.

I think this issue should be reopen, since it’s not the solution and the issue fo sure exists.

I am using https://github.com/Developmint/nuxt-purgecss and adding the following in nuxt.config.js did the trick:

whitelistPatterns: [/(^|\.)fa-/, /-fa($|\.)/]

(similar solution could be applied when using PurgeCSS directly, without specific Nuxt module.)

+1, happening for me too with npm run generate, till it is solved, I wrapped the <fa> component inside a <fa-layers> component.

+1, is it possible to at least have a FAQ that covers this case?