Duplicated css styles

[LadIQe]

Hello guys,

do you have this strange problem with vuetify 3.12.8 / vite 7.3.3 where devtools shows like multiple css styles, like duplications. Chrome is nuts because of this and my devtools are unusable.

Here is my config:

export default defineConfig(({ mode }) => {
  // Load env file based on `mode` in the current working directory.
  const env = loadEnv(mode, process.cwd(), 'VITE_')

  return {
    base: '',
    plugins: [
      Vue({
        template: { transformAssetUrls },
      }),
      Vuetify({
        autoImport: true,
        styles: {
          configFile: 'src/styles/settings.scss',
        },
      }),
      Fonts({
        fontsource: {
          families: [
            {
              name: 'Roboto',
              weights: [100, 300, 400, 500, 700, 900],
              styles: ['normal', 'italic'],
            },
          ],
        },
      }),
    ],
    optimizeDeps: {
      exclude: [
        'vuetify',
        'vue-router',
        'unplugin-vue-router/runtime',
        'unplugin-vue-router/data-loaders',
        'unplugin-vue-router/data-loaders/basic',
        '@tiptap/core',
        '@tiptap/vue-3',
      ],
    },
    css: {
      devSourcemap: false,
    },
    define: { 'process.env': {} },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('src', import.meta.url)),
      },
      extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
    },
    logLevel: 'info',
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules/ol/')) {
              return 'ol'
            }

            if (id.includes('node_modules/@tiptap/')) {
              return 'tiptap'
            }

            if (id.includes('node_modules/vuetify/')) {
              return 'vuetify'
            }

            if (id.includes('node_modules/codemirror/') || id.includes('node_modules/chevrotain/')) {
              return 'editor-libs'
            }
          },
        },
      },
    },
  }
})

Thanks

[LadIQe]

Ok I figured it out. I have settings.scss inside styles folder. I had every "global" style in there and as I read, it will be duplicated by every file that imports settings.scss

So in my case, I just created separated file, moved my styles there and it solvers everything