为什么我会在查看源代码中看到 vuetify css? [英] why do i see vuetify css in view source?

问题描述

我在 vuetify 中使用 nuxt.js.该网站运行良好，并且已经投入生产.但是当我查看查看源代码时，我看到很多垃圾，我宁愿避免，主要是出于性能原因.罪魁祸首是 vuetify，无论我是否使用它们，它都会吐出看起来像所有可用颜色的东西.这是其中的一小部分:

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?

推荐答案

@Ron Al您可以将其添加为 nuxt 的默认清除 css 配置.所以，在你的 nuxt.config.js 添加

@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']
      }
    ]
  }

从这个网站上得到的:https://qiita.com/nogutk/items/58370cd8a713111be9bc

此外，您可以通过在特殊的 css 注释中将其包围来将任何不想被清除的 css 列入白名单/* purgecss start ignore */ 和/* purgecss 结束忽略 */如下图

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>

这篇关于为什么我会在查看源代码中看到 vuetify css?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！