[Vuejs]-Nuxt-purgecss with mdb-vue not working in production

0👍

I have I solved the problem, I am pretty sure pwa and cached files were giving me confusing results.

With my current working nuxt.config.js(see below)

  • I test in dev mode “npm run dev” and css is not purged(what I want).
  • then I run “npm run generate” and test locally, css is purged(what I want).
  • then I push to github dev branch, netlify builds and deploys a staging subdomain, I test there,.. css is purged(what I want).
  • finally I merge the dev branch with master, and push to github, netlify builds and deploys to production, I test there css is purged(what I want).
  build: {
    extractCSS: process.env.NODE_ENV === 'production',
    extend(config, { isDev, isClient, loaders: { vue } }) {
      if (isClient) {
        vue.transformAssetUrls.img = ['data-src', 'src']
        vue.transformAssetUrls.source = ['data-srcset', 'srcset']
      }
      if (isDev && isClient) {
        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']
          })
        )
      }
    },
    transpile: ['mdbvue']
  }

Leave a comment