Reactjs – How to omit .module in a React project (w/ Vite) when importing stylesheets

I have just created a new React project w/ SASS and I wanted to use Vite instead of Webpack.
The project I used to previously work on would allow me to have named imports and omit .module from the imports like

import style from './styles/MyComponent.scss';

// applying a style in the jsx file
    <p className={style.myParagraph>

However vite returns this error and the styles won’t be applied
Default and named imports from CSS files are deprecated. Use the ?inline query instead. For example: import style from "./styles/MyComponent.scss?inline"

Here’s my vite.config.js and what I tried so far

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  css: {
    modules: {
      include: /.scss$/,
      scopeBehaviour: 'local',
      localsConvention: 'camelCase'
    },
    preprocessorOptions: {
      scss: {
        include: /.scss$/,
        localsConvention: 'camelCase'
      }
    },
  },
  build: {
    cssCodeSplit: false,
    minify: true,
  },
})