When I create a project on Nuxt.js, I prefer to extract CSS to chunks files. By default, CSS optimization works okay, but we can setup work it better. Let's do it.

When I use extract by default, I got this result. (I test it on my one of the projects)

Sum Size files = 61.4kB

I analyzed result CSS files and find saved some comments. We can remove it.

Nuxt.js use PostCss and 'cssnano' plugin. For this, we can set up an option. See documentation here.

build: {
  // here some your options
  postcss: {
    plugins: {
      cssnano: {
        preset: [
            discardComments: {
              removeAll: true
Sum Size files = 61.2kB

We always using media queries in our work, and combine these rules can help us too. Let's do it.

First you must install needed node package. I use "css-mqpacker" it's deprecated - but other better solution I didn't find. So I use it.

Install this package

npm i -D css-mqpacker

Let's write rules in build section

  // here some your options
  optimizeCSS: {
    cssProcessor: require('css-mqpacker'),
    cssProcessorPluginOptions: { sort: true }
Sum Size files = 56.5kB

As a result, we save 4,9kB - not much), but we spend 5min for this optimization. I hope it will be helpful for someone.