Estoy tratando de usar módulos scss con react typescript. Esta función debe integrarse en React desde react-scripts@2.0.0 y superior, como se indica en su sitio web .

Para compatibilidad con mecanografiado e intellisense, estoy usando el módulo typescript-plugin-css-modules .

Pasar el cursor sobre las importaciones de css para los nombres de clase funciona bien:

Aquí está mi código:

src/pages/homePage/homePage.tsx

 import styles from './styles.module.scss'; const HomePage = () => { return <div className={styles.myStyle}>Home page</div>; }; export default HomePage;

src/pages/homePage/styles.module.scss

 .myStyle { color: red; }

Mensaje de error en pantalla:

Como puede ver, el color es correcto en el fondo y descartar el error hace que el sitio web funcione bien. Por lo tanto, es seguro asumir que el error solo se comete mediante mecanografiado. He visto artículos sobre esto, como este en el que declaran un archivo style.d.ts en el directorio raíz del módulo, para declarar módulos css, con algo como esto dentro:

 // For SCSS declare module "*.module.scss" { const classes: { [key: string]: string }; export default classes; }

Sin embargo, esto produce un error ya que las clases ya están definidas, porque este archivo ya fue creado por los scripts de reacción:

node_modules/react-scripts/lib/react-app.d.ts

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

Entonces, dado que los scripts de reacción ya los crean para mí, y estoy usando el módulo typescript-plugin-css-modules , todo debería estar bien. No recibo líneas rojas ni errores en el editor de código, solo en el sitio web.

Espero que alguien tenga una solución, gracias de antemano!