Can you use S/CSS modules and have styles build inline using Vite?

Question

I have spend sometime trying to work out how to import a scss module into react components and have them compile as inline styles within the compnent. With the intention of being able to import my react component into a new project like below - and the styles to import along with it.

I have tried a number of things but no matter what i have tried every scss file gets compiled into 1 style.css file in the build.

Any help would be amazing!

App

import { MyComponent } from '@mylibs/ui'; 

cost Page = () => (
  <Wrapper>
    <MyComponent />
  </Wrapper>
)

Component in lib

import styles from './styles.module.scss';

const MyComponent = () => (
  <section classNames={style.myCompnent}>
    ....
  </section>
)

vite.config.ts

export default defineConfig({
  css: {
    modules: {
      scopeBehaviour: 'local',
      localsConvention: 'camelCaseOnly',
      generateScopedName: `v3-[name]__[local]___[hash:base64:5]`,
    },
  },
  build: {
    cssCodeSplit: false,
    lib: {
      entry: 'src/index.ts',
      name: '@stadionh1-v3/base-ui',
    },
    ssr: true,
    ssrManifest: true,
    ssrEmitAssets: true,
    rollupOptions: {
      input: './libs/base-ui/src/index.ts',
      external: ['react', 'react-dom', 'react/jsx-runtime'],
      output: {
        assetFileNames: '[name].[ext]',
      },
    },
  },
  esbuild: {
    jsxFactory: 'React.createElement',
    jsxFragment: 'React.Fragment',
  },
});