Vuetify 样式未 100% 应用答案

【问题标题】：Vuetify style not 100% appliedVuetify 样式未 100% 应用
【发布时间】：2020-08-17 23:49:59
【问题描述】：

我有一个使用 vue cli 设置的 vuetify 应用程序。不幸的是，有些 CSS 样式没有正确应用。

示例：我正在使用v-text-field，除了input 元素获得由用户代理样式表设置的边框之外，它的渲染效果很好。

我看到 this 的帖子，并按照它的建议在我的 main.ts 中明确导入 VTextField。结果是我确实加载了正确的 CSS 并将其应用于我的输入字段，但不幸的是仅在开发模式下 (npm run serve)。当我为生产 (npm run build) 构建我的应用程序时，样式未链接。

有什么建议吗？

main.ts（显式加载 VTextField 等组件）：

import "material-design-icons-iconfont/dist/material-design-icons.css"; // Ensure you are using css-loader
import "../node_modules/typeface-roboto/index.css";
import Vue from "vue";
import { VBtn, VCol, VContainer, VList, VRow, VTextField } from "vuetify/lib";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";

Vue.config.productionTip = false;
Vue.use(vuetify, {
  iconfont: "md",
  components: {
    VBtn,
    VCol,
    VContainer,
    VList,
    VRow,
    VTextField
  }
});

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount("#app");

App.vue:

  <v-app>
    <TopNavigationbar />

    <v-content>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-content>
  </v-app>
</template>

<script lang="ts">
import Vue from "vue";
import TopNavigationbar from "./components/TopNavigationbar.vue";

export default Vue.extend({
  name: "App",

  components: {
    TopNavigationbar
  },

  data: () => ({
    //
  })
});
</script>

<style lang="scss">
@import "../node_modules/typeface-roboto/index.css";
$font-stack: Roboto, sans-serif;
#app {
  font: 100% $font-stack;
}
</style>

还有package.json:

{
  "name": "rpgbattle-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "./node_modules/.bin/vue-cli-service serve",
    "build": "./node_modules/.bin/vue-cli-service build",
    "test:unit": "./node_modules/.bin/vue-cli-service test:unit",
    "lint": "./node_modules/.bin/vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "material-design-icons-iconfont": "^5.0.1",
    "sockjs-client": "^1.4.0",
    "stompjs": "^2.3.3",
    "uuid": "^7.0.3",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.1.6",
    "vuetify": "^2.2.26",
    "vuex": "^3.3.0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@types/sockjs-client": "^1.1.1",
    "@types/stompjs": "^2.3.4",
    "@types/uuid": "^7.0.3",
    "@typescript-eslint/eslint-plugin": "^2.30.0",
    "@typescript-eslint/parser": "^2.30.0",
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-plugin-router": "~4.3.0",
    "@vue/cli-plugin-typescript": "~4.3.0",
    "@vue/cli-plugin-unit-jest": "~4.3.0",
    "@vue/cli-plugin-vuex": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "1.0.0-beta.31",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-vue": "^6.1.2",
    "material-design-icons-iconfont": "^5.0.1",
    "node-sass": "^4.14.0",
    "prettier": "^1.19.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typeface-roboto": "0.0.75",
    "typescript": "~3.8.3",
    "vue-cli-plugin-vuetify": "~2.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  },
  "engines": {
    "node": "^10.14.1",
    "npm": "^6.4.1"
  }
}

【问题讨论】：

1.你能在node_modules中确认这个包安装正确吗？ 2.你最近更新了你的vuetify版本吗？

标签： css vue.js npm webpack vuetify.js

【解决方案1】：

我通过清理我的代码解决了这个问题，但不确定究竟是哪个更改产生了影响：

我有一个重复的电话Vue.use(Vuetify)，一个在我的main.ts（如发布）中，第二个在导入的文件plugins/vuetify.ts。
在同一个文件（plugins/vuetify.ts）中，我有一行import Vuertify from "vuetify"，根据this documentation，我将其更改为import Vuertify from "vuetify/lib"。

【讨论】：