Error on import css/sass scope module to react (ts)

Hello, I have APP based on React with Typescript in laravel project

When I try to use a CSS modules for scope the CSS to the component I have issue to import the CSS

✖ Mix
  Compiled with some errors in 15.23s

ERROR in /var/www/html/resources/js/components/layout/Sidebar/Sidebar.tsx
./resources/js/components/layout/Sidebar/Sidebar.tsx 8:19-41
[tsl] ERROR in /var/www/html/resources/js/components/layout/Sidebar/Sidebar.tsx(8,20)
      TS2307: Cannot find module './styles.module.scss' or its corresponding type declarations.

webpack compiled with 1 error

The app supports SCSS, this is webpack:

// webpack.mix.js
const mix = require('laravel-mix');
const path = require('path')

mix.ts('resources/js/app.js', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        module: {
            rules: []
        },
        resolve: {
            extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx", ".css", ".scss"],
            alias: {
                '@': path.resolve(__dirname, 'resources/js/')
            }
        },

    });

Also I added on types the declaration modules for the sass:

// index.d.ts
declare module '*.module.css' {
    const classes: { [key: string]: string };
    export default classes;
}

declare module '*.module.scss' {
    const classes: { [key: string]: string };
    export default classes;
}

declare module '*.module.sass' {
    const classes: { [key: string]: string };
    export default classes;
}

declare module '*.module.less' {
    const classes: { [key: string]: string };
    export default classes;
}

declare module '*.module.styl' {
    const classes: { [key: string]: string };
    export default classes;
}

I tried to use "typescript-plugin-css-modules" but only disappear the vscode linter error, but laravel mix still trowing the error