时间戳

首页 > 解决方案 > 为什么我在查看源代码中看到 vuetify css？

nuxt.js - 为什么我在查看源代码中看到 vuetify css？

问题描述

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

.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;
}

它像这样继续下去。这是在生产构建之后。知道如何删除它吗？

标签： nuxt.jsvuetify.js

解决方案

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

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 end ignore */ 所示

<style>
/* purgecss start ignore */

some_class {
  text-transform: none !important;
}

/* purgecss end ignore */
</style>

推荐阅读