Laravel - Inertia - Vue2 - Vuetify

Hi All,

I am currently in the process of setting up a project with laravel, inertia, vue2 and vuetify. All is working well, except for the fact that the colors for the vuetify theme are broken and i can't figure out why.

app.js

require('./bootstrap');

import { App, plugin } from '@inertiajs/inertia-vue'
import Vue from 'vue'
import vuetify from "./vuetify";

Vue.use(plugin)

const el = document.getElementById('app')

new Vue({
    vuetify,
    render: h => h(App, {
        props: {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: name => require(`./Pages/${name}`).default,
        },
    }),
}).$mount(el)

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css'
import '@fortawesome/fontawesome-free/css/all.css'

Vue.use(Vuetify)

const opts = {
    icons: {
        iconfont: 'fa',
    },
    theme: {
        light: true,
        themes: {
            light: {
                primary: '#00379F',
                secondary: '#424242',
                accent: '#82B1FF',
                error: '#FF5252',
                info: '#2196F3',
                success: '#4CAF50',
                warning: '#FFC107',
            },
        },
    }
}

export default new Vuetify(opts)

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.3",
        "axios": "^0.21",
        "deepmerge": "^4.2.2",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.3",
        "sass": "^1.32.12",
        "sass-loader": "^8.0.2",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@inertiajs/inertia": "^0.8.7",
        "@inertiajs/inertia-vue": "^0.5.12",
        "vue": "^2.6.12",
        "vuetify": "^2.4.11"
    }
}

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
    .sass('resources/scss/app.scss', 'public/css');

Sass compilation is working, because if i create a vue component with some scss in it, that works perfectly...

All help is greatly appreciated