title: Vuetify style not 100% applied
body: <p>I have a vuetify application that is set up using vue cli. Unfortunately, some CSS styles are not applied properly.</p>
  
  <p>Example: I am using a <code>v-text-field</code> which is rendered fine except that the <code>input</code> element gets borders set by <em>user agent stylesheet</em>.</p>
  
  <p>I saw <a href="https://stackoverflow.com/questions/51218758/vuetify-styles-not-visible">this</a> post, and followed its advise to explicitly import <code>VTextField</code> in my main.ts. The result is that I do get the correct CSS loaded and applied to my input field, but unfortunately only in dev mode (<code>npm run serve</code>). When I build my app for <strong>production</strong> (<code>npm run build</code>), the styles are not linked.</p>
  
  <p>Any advise?</p>
  
  <p><code>main.ts</code> (with explicitly loading components like VTextField):</p>
  
  <pre><code>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 =&gt; h(App)
  }).$mount("#app");
  </code></pre>
  
  <p><code>App.vue</code>:</p>
  
  <pre><code>  &lt;v-app&gt;
      &lt;TopNavigationbar /&gt;
  
      &lt;v-content&gt;
        &lt;v-container fluid&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
        &lt;/v-container&gt;
      &lt;/v-content&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
  import Vue from "vue";
  import TopNavigationbar from "./components/TopNavigationbar.vue";
  
  export default Vue.extend({
    name: "App",
  
    components: {
      TopNavigationbar
    },
  
    data: () =&gt; ({
      //
    })
  });
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
  @import "../node_modules/typeface-roboto/index.css";
  $font-stack: Roboto, sans-serif;
  #app {
    font: 100% $font-stack;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>And <code>package.json</code>:</p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>