Global.module.scss not included in css file after build in Vite 5 or 6

[lggarrison]

Hi everyone,

I'm trying to upgrade from Vite 4 to Vite 6.

Inside my index.tsx for my single page application, I import a global.module.scss file like this.

import 'ui/core/styles/global.module.scss'

When I run build my application using the following command with Vite 4, tsc --build --verbose && vite build

The global.module.scss ends up in the compiled css file as expected.

However when I build my application with Vite 5 or 6 using the same command, the global.module.scss does not end up in the compiled css file.

I've tried several solutions.

I been unable to replace the import statement with a @use statement.

I tried importing the global.module.scss through the vite.config.js with an import statement like this:

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use 'ui/core/styles/global.module.scss' as *;
        `,
        api: 'modern-compiler',
      },
    },
  },

But that creates a cascading list of errors involving [vite:css] [sass] Error: Module loop: this module is already being loaded.

Is it possible to include global.module.scss in the compiled css by just importing it like I did in Vite 4?

The other thing to note is vite serve includes the css from import 'ui/core/styles/global.module.scss' in the index.tsx.

So the problem only occurs with vite build.

Thanks