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
