Hur man får modul-CSS att fungera med TypeScript i en Gatsby-applikation?

Jag har en GatsbyJS-applikation och jag försöker lägga till TypeScript på den. Jag har löst de flesta problemen, men jag kan inte få css-modulen att fungera med den.

Jag har denna import i min fil, som fungerar bra:
import styles from "./card.module.css"

Men när jag lade till TypeScript-konfigurationen säger den att Kan inte hitta modulen './card.module.css'.ts(2307)

Jag försökte använda några Gatsby-plugins, men de fungerade inte som förväntat.

Hela koden finns här: github

Svar #1

Jag hade samma problem och efter att ha provat alla olika plugins stötte jag på denna lösning som fungerade för mig.

Skapa en css.d.ts-fil med:

declare module '*.css' {
    const content: { [className: string]: string };
    export default content;
}

Lägg till dessa rader i din tsconfig.json-fil:

"esModuleInterop": true,
"files": ["./src/typings/css.d.ts"]

Sökvägen för "files" måste matcha där din typdefinitionsfil finns.

https://github.com/thetrevorharmon/gatsby-starter-typescript-sass/issues/1#issuecomment-436748732

Svar #2

Efter att ha provat flera plugins rekommenderar jag att använda gatsby-plugin-dts-css-modules (testad på Gatsby v5).

Installera

npm install gatsby-plugin-dts-css-modules --save-dev
or
yarn add gatsby-plugin-dts-css-modules --dev

Konfiguration

// gatsby-config.ts
const config: GatsbyConfig = {
    // ...
    plugins: [
        // ...
        `gatsby-plugin-dts-css-modules`, // add support for CSS modules with TypeScript
    ]
};

Relaterade artiklar