并非所有 CSS 使用 Vue.js 和 Webpack 在 Vuetify 中运行

Question

我怀疑这与我未能正确提取用于 vuetify 的 JS 文件有关，但我没有设法深入了解任何错误。看来 Vuetify 的某些 CSS 功能（例如列表突出显示事件）在我的应用程序中不起作用，我在其中尝试将 Vuetify 与 Vue.js 和 Webpack 一起使用。

我要实现的示例是 default navigation drawer.

在我的实现中，将鼠标悬停在列表项上不会触发背景颜色更改或光标类型更改。

我的代码：

Main.js

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

Vue.use(Vuetify)

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

App.vue

<template>
  <div id="app">
    <v-app>
      <navigation></navigation>
      <v-toolbar app></v-toolbar>
      <v-content>
        <v-container fluid>
          <router-view></router-view>
        </v-container>
      </v-content>
      <v-footer app></v-footer>
    </v-app>
  </div>
</template>

<script>
import Navigation from '@/views/Navigation'

export default {
  name: 'app',
  components: {Navigation},
}
</script>

<style>
</style>

Navigation.js

<template>
   <v-navigation-drawer app permanent light>
    <v-toolbar flat>
      <v-list>
        <v-list-tile>
          <v-list-tile-title class="title">
            Application
          </v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-toolbar>
    <v-divider></v-divider>
    <v-list dense class="pt-0">
      <v-list-tile v-for="item in items" :key="item.title" >
        <v-list-tile-content>
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  data () {
    return {
        items: [
          { title: 'Home', },
          { title: 'About', }
        ]
    }
  }
}
</script>

<style scoped>
</style>

奇怪的是我可以看到整个 Vuetify css 文件被 webpack 作为样式标签正确注入，我不认为我用任何自定义样式覆盖（因为我有 none!)

我缺少什么才能让 Vuetify 样式正常工作？

（删除了一些无关代码，如果您需要查看更多我的项目文件/代码，请告诉我）

Answer 1

问题是您没有为任何鼠标事件添加处理程序。尝试只添加一个空的：

<v-list dense class="pt-0">
  <v-list-tile v-for="item in items" :key="item.title" @click="">
    <v-list-tile-content>
      <v-list-tile-title>{{ item.title }}</v-list-tile-title>
    </v-list-tile-content>
  </v-list-tile>
</v-list>

并非所有 CSS 使用 Vue.js 和 Webpack 在 Vuetify 中运行

Not all CSS functioning in Vuetify with Vue.js and Webpack

javascript

css

webpack

vue.js

vuetify.js