Webstorm+TypeScript kan ikke løse SCSS-moduler i CRA-prosjekt (Feil TS2339)


Jeg har et Create React App-prosjekt som jeg for øyeblikket migrerer fra FlowJS til TypeScript. Når jeg integrerte TypeScript i prosjektet, oppsto et problem i WebStorm hvor TypeScript ser ut til å ikke kunne løse noen nøkler fra SCSS-modulimporter. Jeg får alltid følgende:

Mitt toppnivå stilimport er: import styles from './_styles.module.scss'

Etter å ha gjort mye forskning/graving for å prøve å løse dette problemet, har jeg opprettet en src/global.d.ts-fil som inneholder følgende:

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

Til tross for å ha definert modulen ovenfor, tømme cacher og starte WebStorm på nytt, vedvarer problemet fortsatt -- jeg vet ikke lenger hva annet jeg kan prøve for å løse dette problemet.

Min TypeScript-versjon er satt til "typescript": "^3.8.3" i min package.json. Og slik ser min tsconfig.json ut:

{
  "compilerOptions": {
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noImplicitAny": false,
    "outDir": "./build",
    "plugins": [
      { "name": "typescript-plugin-css-modules" }
    ],
    "removeComments": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

All hjelp med dette vil bli svært verdsatt.

Svar #1

det ser ut til at typescript ikke plukket opp definisjonene i src/global.d.ts, prøv å legge til src-mappen som en typing root-mappe i tsconfig.json, og start typescript på nytt.

{
  "compilerOptions": {
    ...
    "typeRoots" : ["src", "node_modules/@types"]
  }
}

mer detaljer: @types, typeRoots og typer

Relaterte artikler