Lost styles using Vuetify 2.0.4 - vue.js

Question

I'm having difficulty updating an existing project with Vuetify 2.0.4. I'm fairly sure I'm initializing Vuetify correctly - when I refreshed my app I noticed that breaking changes in Vuetify (e.g. round vs rounded) were being picked up, but once I'd fixed those, all I was left with was an unstyled app with error messages of the form
[Vue warn]: Unknown custom element: <v-app> - did you register the component correctly?
for every Vuetify tag () in my code.
I'm wondering if my problem lies with my attempt to parse .sass files (in webpack.mix.js), but bottom line, I'm totally lost in space here and would appreciate some direction.
Thanks, Tom.
app.js
require('./bootstrap');
import i18n from './i18n.js';
import Vue from 'vue';
import Vuetify from 'vuetify/lib'
import router from './routes.js';
import { store } from './store/store.js';
import VueUtils from './plugins/vue-utils.js';
Vue.prototype.$http = axios;
import Exception from './helpers/Exception'
window.Exception = Exception;
import App from "./components/App.vue";
import Navbar from './components/nav/NavBar.vue';
import Footer from './components/nav/Footer.vue';
import SwitchLanguage from './components/tools/SwitchLanguage.vue';
import SocialMedia from './components/tools/SocialMedia.vue';
import ReturnButton from './components/tools/ReturnButton.vue';
import RelistButton from './components/tools/RelistButton.vue';
import WarningNotification from './components/tools/WarningNotification.vue';
import QuestionButton from './components/tools/QuestionButton.vue';
import Vuelidate from 'vuelidate';
Vue.config.productionTip = true;
Vue.use(VueUtils);
Vue.use(Vuelidate);
Vue.use(require('vue-moment'));
const vuetifyOptions = {
theme: {
dark: true,
}
};
Vue.use(Vuetify);
Vue.component('my-navbar', Navbar);
Vue.component('my-footer', Footer);
Vue.component('switch-language', SwitchLanguage);
Vue.component('social-media', SocialMedia);
Vue.component('return-button', ReturnButton);
Vue.component('relist-button', RelistButton);
Vue.component('warning-notification', WarningNotification);
Vue.component('question-button', QuestionButton);
export const eventBus = new Vue();
new Vue({
store,
i18n,
router,
vuetify: new Vuetify(vuetifyOptions),
render: h => h(App)
}).$mount("#app");
package.json
{
"name": "herdingcats",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"wrkbox": "workbox injectManifest && npm run dev"
},
"dependencies": {
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"caniuse-lite": "^1.0.30000985",
"connect-history-api-fallback": "^1.6.0",
"core-js": "^3.1.4",
"css-loader": "^3.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html2plaintext": "^2.1.2",
"idb": "^4.0.4",
"laravel-echo": "^1.5.4",
"libphonenumber-js": "^1.7.21",
"lodash.uniq": "^4.5.0",
"material-design-icons-iconfont": "^5.0.1",
"popper": "^1.0.1",
"pusher-js": "^5.0.0",
"register-service-worker": "^1.6.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-faq-accordion": "^1.2.1",
"vue-i18n": "^8.12.0",
"vue-moment": "^4.0.0",
"vue-router": "^3.0.7",
"vue-socialmedia-share": "^1.0.1",
"vue-tel-input": "^2.5.0",
"vuelidate": "^0.7.4",
"vuetify": "^2.0.3",
"vuetify-loader": "^1.3.0",
"vuex": "^3.1.1",
"vuex-i18n": "^1.11.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.9.2",
"#vue/cli-plugin-eslint": "^3.9.2",
"#vue/cli-plugin-pwa": "^3.9.0",
"#vue/cli-service": "^3.9.3",
"axios": "^0.19.0",
"babel-eslint": "^10.0.2",
"bootstrap": "^4.3.1",
"cross-env": "^5.2",
"deepmerge": "^4.0.0",
"eslint": "^6.1.0",
"eslint-plugin-vue": "^5.2.3",
"eslint-plugin-vuetify": "^1.0.0-beta.3",
"fibers": "^4.0.1",
"friendly-errors-webpack-plugin": "~1.7",
"jquery": "^3.4",
"laravel-mix": "^4.1.2",
"mini-css-extract-plugin": "^0.8.0",
"popper.js": "^1.15",
"raw-loader": "^3.1.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.22.9",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue": "^2.6.10",
"vue-cli-plugin-vuetify": "^0.6.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.37.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2",
"workbox-cli": "^4.3.1"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
vue.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
runtimeCompiler: true,
configureWebpack: {
plugins: [
new VuetifyLoaderPlugin()
],
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
}
}
]
}
]
},
};
webpack.mix.js
let mix = require('laravel-mix');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//mix.js('resources/js/app.js', 'dist/').sass('resources/sass/app.scss', 'dist/');
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
plugins: [
//new BundleAnalyzerPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
// module: {
// rules: [{
// test: /\.scss$/,
// use: [
// //fallback to style-loader in development
// process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
// "css-loader",
// "sass-loader"
// // {
// // loader: 'sass-loader',
// // options: {
// // implementation: require('sass'),
// // fiber: require('fibers'),
// // }
// // }
// ]
// }]
// },
}
);
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png"> ...
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="./manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="SafeVegetables">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="images/mstile-144x144.png">
<meta name="theme-color" content="#9CCC65">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>XXXX</title>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
<script type='text/javascript'>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<noscript>
<p>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to continue.</p>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script>
let newWorker;
function showUpdateBar() {
let snackbar = document.getElementById('snackbar');
snackbar.className = 'show';
};
// The click event on the pop up notification
document.getElementById('reload').addEventListener('click', function(){
newWorker.postMessage({ action: 'skipWaiting' });
});
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js')
.then(registration => {
console.log(`Service Worker was registered! Scope: ${registration.scope}`);
})
.catch(err => {
console.log(`Service Worker registration failed: ${err}`);
});
});
}
</script>
</body>
</html>