Nuxt.js: NFR - Purge CSS

[benfavre]

Add https://github.com/FullHuman/purgecss

_{This question is available on Nuxt.js community (#c1936)}

[gijo-varghese]

How can I use purgecss with nuxt?

[pi0]

A quick look it seems this plugin depends on static analyzing HTML files. Maybe the only chance to integrate with nuxt is using extractCSS + Nuxt generate.

[gijo-varghese]

@pi0 Can you pls explain little more about "extractCSS + Nuxt generate"

[mustardamus]

Hey, I've coded a module that uses Purgecss with Bulma: https://github.com/mustardamus/nuxt-bulma-slim
Might help you get you going with your setup.

[qm3ster]

also consider https://github.com/purifycss/purifycss

[husayt]

there is an official demo here https://github.com/FullHuman/purgecss/tree/master/examples/with-nuxt

[francoislevesque]

Here's a better way using postCSS.

First install @fullhuman/postcss-purgecss
yarn add -D @fullhuman/postcss-purgecss or npm i -D @fullhuman/postcss-purgecss

In nuxt.config.js

const purgecss = require('@fullhuman/postcss-purgecss')

export default {
   ...,
   build: {
      ...,
      postcss: {
          plugins: [
             purgecss({
                content: [
                   './pages/**/*.vue',
                   './layouts/**/*.vue',
                   './components/**/*.vue'
                ],
               whitelist: ['html', 'body'],
               whitelistPatterns: [/nuxt-/]
            })
         ]
      }   
   }
}

UPDATE

The code above will run for npm run prod and npm run dev. It may not be desirable. This link provide a better solution according to me: https://github.com/FullHuman/purgecss/tree/master/examples/with-nuxt

[AdsonCicilioti]

@francoislevesque .. thx! this works for me.
Following this solution, could you tell me how to merge all CSS files into one?
In my _nuxt folder, besides the main css, I have others referring to the specific component styles.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.