Question

我通过Nuxt插件通过命令npx create-nuxt-app安装了Vuetify。然后，我通过npm run dev或npm run build && npm start运行服务器，并且在页面源代码中，我在<head>标签中看到了Vuetify的CSS样式。经过一番谷歌搜索后，我发现建议在extractCSS: true,的构建部分中添加nuxt.config.js。之后，当我运行npm run build && npm start时，css文件正在生成并链接到页面，但是我仍然在<style data-n-head="true" id="vuetify-theme-stylesheet" type="text/css">中看到一些CSS样式（约500行）。如何将它们隐藏到CSS文件中，而不是显示在<head>标签中。

以及如何在启动npm run dev时提取CSS（调试HTML布局时非常讨厌滚动此CSS）？

Answer 1

不确定这是否是完全相同的问题，但我发现每个预渲染的 html 文件的头部都有很多行 Vuetify 颜色 CSS。我最终找到了 https://vuetifyjs.com/en/features/theme/#variations。

<块引用>

当 Vuetify 生成应用程序的主题时，它会为每种颜色创建 9 个变体。对于大多数用户来说，这些变体很少使用。这是一个选择加入的功能，在下一个主要版本中默认为 false。

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

export default new Vuetify({
  theme: {
    options: { variations: false },
  },
})

如上添加 options: { variations: false }（以及 Nuxt.config.js 中的 extractCSS: true）消除了预渲染 html 中所有多余的 CSS。

Nuxt与Vuetify。 HEAD标记中的CSS

1 个答案: