Static GitHub Issues

[892] Help cleanup css unused styles mess with a webpack plugin

prev: Nuxt about when you can publish the official version of 1.0 it
next: Force a specific component to render only on client ?

I am new to nuxt and really enjoying working with it so far. I created a simple app with few pages and deploying on zeit/now. All I have done is added firebase and bulma/scss and I have started getting chunk size warnings! So I went looking and I think I have reduced my firebase footprint but not happy with amount of unused CSS styling being shipped to the browser. I have selectively imported only relevant scss files in layout, however there are still many styles that are not used but get bundled.

So I started looking and found that PurifyCSS with purifycss-webpack is the answer. Then I looked for ways to include the plugin in build, so I tried below in nuxt.config.js:

...
build: {
    plugins: [
      new PurifyCSSPlugin({paths: glob.sync(path.join(__dirname, 'index.html'))})
    ]
}
...

I still see that my index.html is loaded with unused styles in dev.

What am I missing?

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