How to have named imports and custom file names with Vite, React, Typescript and SCCS modules

Question

I have a Vite/React/Typescript app configured with sass and I would like to:

1. Import the styles as named imports:

import { styles } from "my-component.styles.scss";

2. Configure Vite (or sass) to recognize all *.styles.scss files as css modules as it happens for *.modules.scss

Here is my Vite config file

/// <reference types="vitest" />
import react from "@vitejs/plugin-react-swc";
import path from "path";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  },
  css: {
    preprocessorOptions: {
      scss: {
        api: "modern-compiler"
      }
    },
    modules: {
      localsConvention: "camelCase"
    }
  }
});