Question

我有一个使用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"
  }
}

Answer 1

我通过清理代码解决了问题，不确定哪个更改确实有所作为：

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

Vuetify样式未100％应用

1 个答案: