Vuetify css不适用答案

【问题标题】：Vuetify css not applyingVuetify css不适用
【发布时间】：2020-06-14 03:30:26
【问题描述】：

我正在学习this 教程。我在他添加 Vuetify 的地方大约有 40 分钟，我一直在跟进，据我所知，我的代码与他的代码相同，但似乎 Vuetify 不会在我这边加载。

在下图中，左边是我屏幕上的样子，右边是教程/它应该是什么样子。

这里是相关的 .vue 页面：

<template>
    <v-layout column>
      <v-flex xs6 offset-xs3>
        <div class="white elevation-2">
          <v-toolbar class="cyan" flat dense dark>
            <v-toolbar-title>Register</v-toolbar-title>
          </v-toolbar>
          <div class="pl-4 pr-4 pt-2 pb-2">
            <input
              type="email"
              name="email"
              v-model="email"
              placeholder="email" />
              <br>
            <input
              type="password"
              name="password"
              v-model="password"
              placeholder="password" />
              <br>
              <div class="error" v-html="error" />
              <br>
            <button
              @click="register">
              Register
            </button>
          </div>
        </div>
      </v-flex>
    </v-layout>
</template>

这是我导入 vuetify 的 main.js：

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import '../node_modules/vuetify/dist/vuetify.min.css'

Vue.config.productionTip = false

Vue.use(Vuetify)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

我不确定是什么问题。 vuetify.min.css 文件位于从中导入它的位置。 npm 表示 vuetify 已正确安装。

【问题讨论】：

控制台中是否有关于未找到vuetify.min.css 的错误？如果是，请检查路径是否正确。我的猜测是 ../ 部分是错误的，这取决于 main.js 的放置位置。如果main.js 放在根级别，将../ 替换为./ 即可。
其实我觉得我说得对。当我从 ../ 更改为 ./ 时，它会输出错误： * ./node_modules/vuetify/dist/vuetify.min.css in ./src/main.js 它不会像我那样输出任何错误。
在这种情况下，错误在其他地方。这使您的问题无法回答，因为我们无法知道问题出在哪里，也无法进行检查。考虑使用 codesandbox.io 或类似服务提供minimal reproducible example。从理论上讲，这也可能是教程不再与最新版本的软件包保持同步的情况。考虑向教程的作者寻求帮助。

标签： css vue.js vuetify.js

【解决方案1】：

将 css 导入行替换为所示的行。这是从官方 Vuetify 文档中复制的。 (https://vuetifyjs.com/en/getting-started/quick-start)

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.config.productionTip = false

Vue.use(Vuetify)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

【讨论】：

我很欣赏这个建议。我试过了，问题还是一样。似乎 .css 文件正在正确导入，但 css 只是没有应用。因为如果我没有正确指定 vuetify .css 文件，那么我会收到错误消息，抱怨它找不到 vuetify。

【解决方案2】：

试试这个：

<template>
  <div>
    <v-app>
      <v-layout coloumn>...</v-layout>
    </v-app>
  </div>
</template>

【讨论】：

仅代码答案几乎总是可以通过添加一些解释来改进。在这种情况下，您可以指出添加<v-app> 以及为什么需要它。否则，别人会很容易看到这个并注意到您对 column 的错误拼写并认为您试图传达的内容是什么。