Static GitHub Issues

[3269] PurgeCss with nuxt

prev: nuxt-link prevents correct native scaling of inline svg (also ignores other styling)
next: Deploy AWS Error: Nuxt + Vue error load image and font-awesome.css

Hi

According to

https://www.purgecss.com/guides/nuxt

configuration they provide should work. However with me config:

const webpack = require('webpack')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
const path = require('path')

module.exports = {
  /*
   ** Headers of the page
   */
  head: {
    meta: [
      {
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1'
      },
      {
        name: 'theme-color',
        content: '#e62c56'
      }
    ],
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.ico'
      }
    ]
  },
  css: [
      '@/assets/sass/app.scss'
  ],
  modules: [
      '@nuxtjs/dotenv',
      '@nuxtjs/axios',
      '@nuxtjs/toast',
      '@nuxtjs/pwa',
    ['nuxt-validate', {
      lang: 'en',
    }]
  ],

  workbox: {
    runtimeCaching: [
      {
        // Should be a regex string. Compiles into new RegExp('https://my-cdn.com/.*')
        urlPattern: 'https://cdn.timeandattendance/.*',
        // Defaults to `networkFirst` if omitted
        handler: 'cacheFirst',
        // Defaults to `GET` if omitted
        method: 'GET'
        }
      ]
  },

  manifest: {
    name: 'Elf Productivity LTD',
    lang: 'en'
  },

  toast: {
    position: 'bottom-right',
    iconPack: 'fontawesome',
    icon: 'user',
    duration: '4000'
  },

  axios: {
    retry: {
      retries: 3
    }
  },
  /*
   ** Customize the progress bar color
   */
  loading: {
    name: 'circle',
    color: '#3B8070',
    background: 'black'
  },
  plugins: [
      '~/plugins/global_plugins',
      '~/plugins/visibility',
      '~/plugins/lazy',
      '~/plugins/directives',
    {
      src: '~/plugins/typer',
      ssr: false
  }
  ],
  /*
   ** Build configuration
   */
  build: {
    /*
     ** Run ESLint on save
     */
    extend(config, {
      isDev,
      isClient
    }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      if (!isDev) {
        // Remove unused CSS using purgecss. See https://github.com/FullHuman/purgecss
        // for more information about purgecss.
      }
      config.plugins.push(
        new PurgecssPlugin({
          paths: glob.sync([
        path.join(__dirname, './pages/**/*.vue'),
        path.join(__dirname, './layouts/**/*.vue'),
        path.join(__dirname, './components/**/*.vue')
      ]),
          whitelist: ['html', 'body']
        })
      )
      }
    },
    plugins: [
        new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        Popper: "popper.js/dist/umd/popper.js",
      })
  ],
    vendor: ['bootstrap', 'popper.js', 'jquery', 'smooth-scroll', '~/plugins/global']
  }
}

and it doesn't work as lightbox in google dev tools still complain about unused css rules. is there a way to make it to work?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c6975">#c6975</a>)</em></sub></div>