Missing classes after production build

[bergstar]

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

[rhnvrm]

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

[vaso2]

Hi, can you give more context, what you're trying to achieve and what goes wrong?

[rhnvrm]

You can replicate it this way,

        <div @click="redirect_href('twitter')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
            <p class="font-bold text-lg mb-1 group-hover:text-white"><fa-layers full-width class="fa flex-none align-middle"><fa :icon="faTwitter" /></fa-layers> <span class="pl-2">Twitter</span></p>
        </div>

        <div @click="redirect_href('github')" class="flex group cursor-pointer hover:text-white hover:bg-indigo p-4 border-b">
            <p class="font-bold text-lg mb-1 group-hover:text-white"><fa :icon="faGithub" /><span class="pl-2">Github</span></p>
        </div>

With npm run generate

With yarn dev

[bergstar]

yarn generate

yarn dev

this is pure sample from readme file.

[rhnvrm]

To be precise, .svg-inline--fa.fa-w-16 etc are not being inlined

[loomchild]

Hi, I have the same problem. Are you using PurgeCSS? Since when I disabled it the issue is gone. I think the whitelist configuration needs to be tweaked to avoid purging fontawesome classes. Investigating.

[loomchild]

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.)

[vaso2]

@bergstar @rhnvrm can you confirm that? I’m heavy loaded nowadays, and gave only brief shot on the issue - without success to reproduce it

[vaso2]

Closing due to inactivity

[pschaub]

i have the same issue while using purgecss.

The solution from @loomchild works fine inside nuxt.config.js if you use nuxt-purgecss:

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

Warning: this is not a perfect solution. The maintainers of nuxt-fontawesome should find a better way.

[vaso2]

@loomchild @pschaub thanks for sharing!

[krystian50]

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.

[loomchild]

I agree it's a workaround and it should work out-of-the-box. However, I am not sure where and how it should be fixed.

[SHxKM]

Any update on this? This is very weird as the last time I worked with Nuxt and nuxt-font-awesome this wasn't an issue but now suddenly some icon classes are not being picked up. Using whitelistPatterns: [/(^|\.)fa-/, /-fa($|\.)/] does not help in my case. I'm using purgecss-webpack-plugin and not the Nuxt module.

[mobregozo]

I am also facing the same issue, the only workaround I found so far was to add the missing classes manually to the styles.

[LostCrew]

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

[mckraemer]

Any update?

[nwilging]

I am also experiencing this issue, and the purgeCSS options do not work in my case. What's strange is other projects using the exact same configuration as the project in question is rendering icons in production builds just fine. Even after rebuilds.

Nuxt 2.15.8 nuxt-purgecss 1.0.0 nuxt-fontawesome 0.4.0 @nuxtjs/tailwindcss 4.2.1

[phojie]

Same issues. please open this issue again

Nuxt 2.15.8 nuxt-fontawesome 0.4.0 @nuxtjs/tailwindcss 5.0.0

[sheldonbaker]

Seems to be a nuxt.js issue: https://github.com/nuxt/nuxt.js/issues/10261

[mbriceno]

Well, after a lot of time test a lot of configs, this solution resolved my problem with giant icons: nuxt.config.js:

css: [
  "@fortawesome/fontawesome-svg-core/styles.css",
  "~/assets/scss/global.scss",
]

more here: https://www.eglador.de/46