Vuetify works locally but breaks when deployed to firebase, why might this be happening? - firebase

Question

I have a website that is hosted through Firebase that uses Vue and Vuetify. Vuetify is only used for one component and the rest of the app uses SCSS for styling. Vuetify has been a recent addition to the project and getting it set up and working locally went fine. However when I tried to deploy my changes to Firebase for the first time since adding Vuetify, the app renders with no styling at all - no Vuetify and no SCSS.
Below are the files I had to change in order to get Vuetify working locally following the installation guide + my firebase.json because it seems relevant.
Part of package.json
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "npm run lint && vue-cli-service build --mode test",
},
"dependencies": {
"core-js": "^2.6.12",
"firebase": "^9.5.0",
"regenerator-runtime": "^0.13.11",
"register-service-worker": "^1.7.2",
"vue": "^2.6.12",
"vuetify": "^2.6.12",
"vuex": "^3.6.2"
},
"devDependencies": {
"#babel/preset-env": "^7.20.2",
"#vue/cli-plugin-babel": "^3.8.0",
"#vue/cli-plugin-eslint": "^3.8.0",
"#vue/cli-plugin-pwa": "^3.8.0",
"#vue/cli-service": "^3.8.0",
"babel-eslint": "^10.1.0",
"imagemin-webpack-plugin": "^2.4.2",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.0"
},
}
plugins/vuetify.js
import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
import "vuetify/dist/vuetify.min.css";
//have deployed with and without the above line to no avail, some stackoverflow threads suggested it but was not in the documentation
Vue.use(Vuetify);
export default new Vuetify({
theme: {
options: {
customProperties: true,
},
themes: {
light: {
primary: "#007BFF",
secondary: "#424242",
accent: "#82B1FF",
error: "#FF5252",
info: "#2196F3",
success: "#4CAF50",
warning: "#FFC107",
},
},
},
icons: {
iconfont: "fa",
},
});
Part of main.js
import "core-js";
import "regenerator-runtime/runtime";
import Vue from "vue";
import vuetify from "#/plugins/vuetify";
var createApp = function() {
if (!app) {
app = new Vue({
router,
store,
vuetify,
data: {},
render: (h) => h(App),
}).$mount("#app");
}
};
bable.config.js
//bable.config.js
module.exports = {
presets: ["#vue/app", "#babel/preset-env"],
};
firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [],
"source": "functions"
},
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [
{ "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"storage": {
"rules": "storage.rules"
},
"database": {
"rules": "database.rules.json"
}
}
Lastly, my vue.config.js also contains the line
transpileDependencies: ["vuetify"],
I've cleared the web browser cache several times and made sure to wrap my Vuetify component within v-app.
npm run build and firebase deploy both run without error but since my app lacks styling after deployment I think something is going wrong with my firebase.json.
Relatively new to Vue, Vuetify, and Firebase so appreciate any explanations or guesses as to why this behavior might be occurring.
Thanks