Vuetify css not applying in Heroku

问题

I'm developing a rails app, that uses vue through webpacker. Inside of the vue app I import vuetify and vuetify.css like so:

import Vue from 'vue'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import 'vuetify/dist/vuetify.min.css'
import App from '../app.vue'
import Axios from 'axios'
import VueAxios from 'vue-axios'
import Vuex from 'vuex'

Works fine locally, but when pushed to heroku it no longer works. The app deploys, and it appears like vuetify is included, but the vuetify css is not. Why is this? Other css features are included. I tried importing vuetify css in my application.scss file like so, but no luck:

@import '~vuetify/src/vuetify.min.css';

@import '~node_modules/vuetify/dist/vuetify.min.css';

Further, I plan on decoupling the vue app from the rails app later, will this still be a problem then?

回答1:

You'll need to mostly follow the Webpack Instructions here - https://vuetifyjs.com/en/getting-started/installation/#webpack-install (but ignore installing the sass-loader, since that should be already in place).

yarn add vuetify

Add this at the top of your vuetify plugin:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Remove:

@import '~vuetify/src/vuetify.min.css';

@import '~node_modules/vuetify/dist/vuetify.min.css';

import 'vuetify/dist/vuetify.min.css'

^ sass should pack the vuetify css

来源：https://stackoverflow.com/questions/65708053/vuetify-css-not-applying-in-heroku