javascript - "Kan ikke finne modul './something.module.scss' eller dens tilsvarende typedeklarasjoner"

Jeg prøver å bruke scss-moduler med React TypeScript. Denne funksjonen bør være innebygd i React fra [email og høyere, som det står på deres nettside.

For TypeScript-støtte og Intellisense bruker jeg typescript-plugin-css-modules-modulen.

Å holde musen over CSS-importer for klassenavn fungerer helt fint:

Her er koden min:

src/sider/hjemmeside/hjemmeside.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;
}

Feilmelding på skjermen:

Som du kan se, er fargen korrekt i bakgrunnen, og å ignorere feilen gjør at nettstedet fungerer helt fint. Derfor er det trygt å anta at feilen bare oppstår på grunn av TypeScript. Jeg har sett artikler om dette, som denne hvor de erklærer en style.d.ts-fil i modulens rotmappe, for å erklære CSS-moduler, med noe slikt inni:

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

Dette gir imidlertid en feil ettersom klasser allerede er definert, fordi denne filen allerede er opprettet av react-skripter:

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

[...]

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

[...]

Så, siden react-scripts allerede lager disse for meg, og jeg bruker typescript-plugin-css-modules-modulen, bør alt være i orden. Jeg får ingen røde streker eller feil i kodeeditoren, bare på nettsiden.

Jeg håper noen har en løsning, takk på forhånd!

Svar #1

Jeg fant svaret. Jeg slettet ved et uhell react-app-env.d.ts etter å ha brukt create-react-app. Denne må eksistere for å kunne bruke CSS-moduler. Hvis prosjektet ditt også mangler denne filen, legg den til i src-mappen din og skriv

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

Svar #2

Så vidt jeg vet, kan du bruke module.scss, men du bør importere stil fra module.css, ikke module.scss. Det fungerer for meg.

Relaterte artikler