title: Vuetify CSS missing when i build for production
body: <p>We purchased a web app written in Vue from someone and we developing to change/improve it. One thing we added was Vuetify so we can use the Vuetify elements and everything has been working great while in development mode, but when we build for production the CSS for Vuetify elements is missing.</p>
  <p>I have searched for this online already and have already tried what everybody is suggesting without any luck.</p>
  <p>Anybody has an idea of what could be wrong and why npm run build would be missing some of the CSS?</p>
  <p>What's weird is that all the UI functionality for Vue elements is working perfectly, just the CSS is missing.</p>
  <p>Please see code samples below.</p>
  <p>main.js:</p>
  <pre><code>import '@fortawesome/fontawesome-free/css/all.css'
  import Vue from &quot;vue&quot;;
  import App from &quot;./App.vue&quot;;
  import VueMoment from &quot;vue-moment&quot;;
  import VueAnalytics from &quot;vue-analytics&quot;;
  import VueMeta from &quot;vue-meta&quot;;
  import { library } from &quot;@fortawesome/fontawesome-svg-core&quot;;
  import {
    faCoffee,
    faPlusCircle,
    faChartLine,
    faChevronDown,
    faMobile,
    faEnvelope,
    faClock,
    faUsers,
    faPaperPlane,
    faCheckCircle,
    faCheck,
    faLeaf,
  } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  import { FontAwesomeIcon } from &quot;@fortawesome/vue-fontawesome&quot;;
  import axios from &quot;axios&quot;;
  import router from &quot;./router&quot;;
  import store from &quot;./store&quot;;
  import vuetify from './plugins/vuetify';
  import Vuetify from 'vuetify/lib'
  
  library.add([
    faCoffee,
    faPlusCircle,
    faChartLine,
    faChevronDown,
    faMobile,
    faEnvelope,
    faClock,
    faUsers,
    faPaperPlane,
    faCheckCircle,
    faCheck,
    faLeaf,
  ]);
  
  Vue.use(VueAnalytics, {
    id: &quot;xxx&quot;,
    router,
  });
  Vue.use(VueMoment);
  Vue.use(VueMeta);
  Vue.component(&quot;font-awesome-icon&quot;, FontAwesomeIcon);
  
  Vue.use(Vuetify)
  
  axios.interceptors.response.use(undefined, async function (error) {
    if (error.response.status === 401) {
      await store.dispatch(&quot;auth/logout&quot;);
      router.push(&quot;/login&quot;);
    }
    return Promise.reject(error);
  });
  
  // Plugins
  // ...
  
  // Sass file
  require(&quot;./assets/styles/main.css&quot;);
  
  Vue.config.productionTip = false;
  
  new Vue({
    router,
    store,
    vuetify,
    render: (h) =&gt; h(App)
  }).$mount(&quot;#app&quot;);
  </code></pre>
  <p>App.vue:</p>
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
  
      &lt;v-main&gt;
        &lt;router-view/&gt;
      &lt;/v-main&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;style&gt;
    .text-white {
        color: #fff !important;
    }
  
    .text-gray-600 {
      color: #757575 !important;
    }
  
    .font-semibold, .text-gray-700 {
      color: #616161 !important;
    }
  &lt;/style&gt;
  </code></pre>
  <p>package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;reviewgrower-spa&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
      &quot;build&quot;: &quot;vue-cli-service build&quot;,
      &quot;lint&quot;: &quot;vue-cli-service lint&quot;,
      &quot;deploy&quot;: &quot;git push dokku master&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.25&quot;,
      &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.11.2&quot;,
      &quot;@fortawesome/vue-fontawesome&quot;: &quot;^0.1.8&quot;,
      &quot;@fullhuman/postcss-purgecss&quot;: &quot;^1.3.0&quot;,
      &quot;axios&quot;: &quot;^0.19.0&quot;,
      &quot;chart.js&quot;: &quot;^2.9.4&quot;,
      &quot;core-js&quot;: &quot;^2.6.10&quot;,
      &quot;i&quot;: &quot;^0.3.6&quot;,
      &quot;jquery&quot;: &quot;^3.5.1&quot;,
      &quot;npm&quot;: &quot;^6.13.0&quot;,
      &quot;tailwindcss-spinner&quot;: &quot;^0.2.0&quot;,
      &quot;tailwindcss-toggle&quot;: &quot;github:TowelSoftware/tailwindcss-toggle&quot;,
      &quot;url-parse&quot;: &quot;^1.4.7&quot;,
      &quot;vue&quot;: &quot;^2.6.10&quot;,
      &quot;vue-analytics&quot;: &quot;^5.17.2&quot;,
      &quot;vue-chartjs&quot;: &quot;^3.5.1&quot;,
      &quot;vue-click-outside&quot;: &quot;^1.0.7&quot;,
      &quot;vue-clickaway&quot;: &quot;^2.2.2&quot;,
      &quot;vue-feather-icons&quot;: &quot;^4.22.0&quot;,
      &quot;vue-js-toggle-button&quot;: &quot;^1.3.3&quot;,
      &quot;vue-meta&quot;: &quot;^1.6.0&quot;,
      &quot;vue-moment&quot;: &quot;^4.0.0&quot;,
      &quot;vue-router&quot;: &quot;^3.1.3&quot;,
      &quot;vue-stripe-elements-plus&quot;: &quot;^0.2.10&quot;,
      &quot;vuetify&quot;: &quot;^2.4.0&quot;,
      &quot;vuex&quot;: &quot;^3.0.1&quot;,
      &quot;vuex-persist&quot;: &quot;^2.1.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@fortawesome/fontawesome-free&quot;: &quot;^5.15.2&quot;,
      &quot;@vue/cli-plugin-babel&quot;: &quot;^3.12.1&quot;,
      &quot;@vue/cli-plugin-eslint&quot;: &quot;^3.12.1&quot;,
      &quot;@vue/cli-service&quot;: &quot;^3.12.1&quot;,
      &quot;babel-eslint&quot;: &quot;^10.0.3&quot;,
      &quot;eslint&quot;: &quot;^5.16.0&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^5.2.3&quot;,
      &quot;sass&quot;: &quot;^1.32.0&quot;,
      &quot;sass-loader&quot;: &quot;^7.1.0&quot;,
      &quot;tailwindcss&quot;: &quot;^1.1.3&quot;,
      &quot;vue-cli-plugin-vuetify&quot;: &quot;~2.1.0&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.5.21&quot;,
      &quot;vuetify-loader&quot;: &quot;^1.7.0&quot;
    }
  }
  </code></pre>