why do i see vuetify css in view source?

Question

I use nuxt.js with vuetify. the website works great and already in production. but when i look at view source, i see lots of garbage, that i would prefer to avoid, mainly for performance reasons. the culprit is vuetify, that spits what looks like all available colors, whether i use them or not. here is a very small portion of this:

.v-application .primary {
  background-color: #1976d2 !important;
  border-color: #1976d2 !important;
}
.v-application .primary--text {
  color: #1976d2 !important;
  caret-color: #1976d2 !important;
}
.v-application .primary.lighten-5 {
  background-color: #c7fdff !important;
  border-color: #c7fdff !important;
}
.v-application .primary--text.text--lighten-5 {
  color: #c7fdff !important;
  caret-color: #c7fdff !important;
}
.v-application .primary.lighten-4 {
  background-color: #a8e0ff !important;
  border-color: #a8e0ff !important;
}
.v-application .primary--text.text--lighten-4 {
  color: #a8e0ff !important;
  caret-color: #a8e0ff !important;
}

it goes on and on like this. and this is after production build. Any idea how to remove this?

Answer 1

@Ron Al you can add this as your default purge-css config for nuxt. So, in your nuxt.config.js add

purgeCSS: {
    enabled: true,
    paths: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      './node_modules/vuetify/dist/vuetify.js'
    ],
    styleExtensions: ['.css'],
    // whitelist: ['body', 'html', 'nuxt-progress', ''],

    whitelist: ['v-application', 'v-application--wrap','layout','row','col'],
    whitelistPatterns: [
      /^v-((?!application).)*$/,
      /^theme--*/,
      /.*-transition/,
      /^justify-*/,
      /^p*-[0-9]/,
      /^m*-[0-9]/,
      /^text--*/,
      /--text$/,
      /^row-*/,
      /^col-*/
    ],
    whitelistPatternsChildren: [/^v-((?!application).)*$/, /^theme--*/],

    extractors: [
      {
        extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
        extensions: ['html', 'vue', 'js']
      }
    ]
  }

Got it from this website: https://qiita.com/nogutk/items/58370cd8a713111be9bc

Furthermore, you can whitelist any css that you don't want to be purged by surrounding it in special css comments /* purgecss start ignore */ and /* purgecss end ignore */ as shown below

<style>
/* purgecss start ignore */

some_class {
  text-transform: none !important;
}

/* purgecss end ignore */
</style>

Answer 2

you can use nuxt-purgecss to remove all unused css.

you can simply add it in the buildModules section of your nuxt.config.js as shown below.

nuxt-purgecss