Vite serve functionality is importing Vuetify's main.sass and is overriding old styling

Question

I am migrating my Vue 2 multi-page project from Vue-CLI to Vite. I have a huge project with a lot of old code and styling that should probably be removed/rewritten. We introduced Vue to the code a couple of years ago to slowly get rid of old jQuery and Bootstrap code. We wanted to use Vuetify as farmework with Vue, but to make this work we had to wrap all our vue/Vuetify styles in wrapper class, this way the default Vuetify styling didn't ruin the Bootstrap styles, this was working perfect. Now with Vite we are running into an issue where Vite's serve functionality is inserting the main.sass file from Vuetify which breaks and overrides our other styling. I can't seem to find a way to make Vite NOT fetch the styling for Vuetify. Maybe I have missed something?

To fix the styles problem earlier we imported Vuetify and Vue bundled styling in to our own scss file with a wrapper.

As a resolver I am using VuetifyResolver()

I have found what I think is the issue (see image): Image of Vite inserted DOM If i remove this the styling works fine.

Sidenote: When running vite build the styling works fine. So it seems the injection of css is breaking something.

I have tried to move all the importing of styles around, and only import Vuetify styling in scss files, to make Vite not see it. This is not working and now I am out of answers.

My Vite.config file:

import vue from '@vitejs/plugin-vue2';
import { defineConfig, splitVendorChunkPlugin } from 'vite';
import { resolve } from 'path';
import { fileURLToPath } from 'url';
import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  resolve: {
    extensions: [
      ".mjs",
      ".js",
      ".ts",
      ".tsx",
      ".jsx",
      ".json",
      ".vue",
      ".scss"
    ],
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~': fileURLToPath(new URL('./node_modules', import.meta.url)),
      vue: 'vue/dist/vue.esm.js'
    }
  },
  build: {
    cssMinify: true,
    minify: true,
    cssCodeSplit: false,
    sourcemap: true,
    emptyOutDir: true,
    outDir: 'path/to/dir',
    assetsDir: '',
    rollupOptions: {
      input: {
        app: path/to/dir,
        dashboard: path/to/dir,
        login: path/to/dir,
      },
      output: {
        entryFileNames: '[name].js',
        assetFileNames: 'app.css',
        sourcemap: true
      }
    }
  },
  plugins: [
    vue(),
    Components({
      resolvers: [
        VuetifyResolver()
      ],
    }),
    splitVendorChunkPlugin()
  ],
})

My vuetify plugin file:

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

Vue.use(Vuetify)

const opts = {
  lang: {
    locales: { da },
    current: 'da'
  }
}

export default new Vuetify(opts) 

My css file that is importing the Vuetify styling a long with the Vite styling. I am aware that there are some duplicate styling from Vuetify here :)

// Added for not letting vuetify override bootstrap styles
.vueContent {
    @import '../../../wwwroot/dist/app';
    @import '~/vuetify/dist/vuetify.min.css';
// Rest of css...

Edit: My Vue is used inside a .net5 project. Also feel free to ask if you need more information :)