javascript - "Kan inte hitta modulen './something.module.scss' eller dess motsvarande typdeklarationer"


Jag försöker använda scss-moduler med React TypeScript. Denna funktion bör vara inbyggd i React från [email och högre som det står på deras webbplats.

För stöd för TypeScript och Intellisense använder jag typescript-plugin-css-modules-modulen.

Att hovra över CSS-importer för klassnamn fungerar alldeles utmärkt:

Här är min kod:


src/sidor/hemSida/hemSida.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;
}

Felmeddelande på skärmen:

Som du kan se är färgen korrekt i bakgrunden, och att avfärda felet gör att webbplatsen fungerar precis som den ska. Därför är det säkert att anta att felet endast orsakas av TypeScript. Jag har sett artiklar om detta, som denna där de deklarerar en style.d.ts-fil i modulens rotkatalog, för att deklarera CSS-moduler, med något liknande detta inuti:

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

Men detta ger ett fel eftersom klasser redan är definierade, eftersom denna fil redan är skapad av React-skript:

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

[...]

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

[...]

Så, eftersom react-scripts redan skapar dessa för mig, och jag använder typescript-plugin-css-modules-modulen, borde allt vara bra. Jag får inga röda streck eller fel i kodeditorn, bara på webbplatsen.

Jag hoppas att någon har en lösning, tack på förhand!

Svar #1

Jag hittade svaret. Jag råkade ta bort react-app-env.d.ts efter att ha använt create-react-app. Denna fil måste finnas för att kunna använda CSS-moduler. Om ditt projekt också saknar denna fil, lägg till den i din src-mapp och skriv

/// <reference types="react-scripts" />

Svar #2

Såvitt jag vet kan du använda module.scss, men du bör importera stil från module.css, inte module.scss. Det fungerar för mig.

Relaterade artiklar