Vuetify style не применяется на 100% - PullRequest
Новая
       40

Vuetify style не применяется на 100%

0 голосов
/ 03 мая 2020

У меня есть приложение vuetify, настроенное с помощью vue cli. К сожалению, некоторые стили CSS не применяются должным образом.

Пример: я использую v-text-field, который отображается нормально, за исключением того, что элемент input получает границы, установленные таблицей стилей агента пользователя .

Я увидел этот пост и последовал его совету явно импортировать VTextField в моем main.ts. В результате я получаю правильное значение CSS, которое загружается и применяется к моему полю ввода, но, к сожалению, только в режиме разработки (npm run serve). Когда я создаю свое приложение для production (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 Ответ

0 голосов
/ 06 мая 2020

Я решил проблему, очистив свой код, не уверенный, какое именно изменение имело значение:

  • У меня был повторный вызов Vue.use(Vuetify), один в моем main.ts (как опубликовано ), второй в импортированном файле plugins/vuetify.ts.
  • В том же файле (plugins/vuetify.ts) у меня была строка import Vuertify from "vuetify", которую я изменил на import Vuertify from "vuetify/lib", согласно this документация .
...