Webstorm+TypeScript无法解析CRA项目中的SCSS模块(Error TS2339)

Question

我有一个Create React App项目，我目前正在从FlowJS迁移到TypeScript。当我把TypeScript集成到项目中时，在WebStorm中出现了一个问题，那就是TypeScript似乎不能解决任何从SCSS模块导入的键。我总是得到下面的问候。

我的顶层样式导入是： import styles from './_styles.module.scss'

在做了大量的研究之后，为了解决这个问题，我创建了一个 src/global.d.ts 文件，其中包含以下内容。

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

尽管定义了上述模块，使缓存无效，并重新启动了WebStorm，但问题仍然存在 -- 我已经不知道还能尝试什么来解决这个问题。

我的TypeScript版本被设置为 "typescript": "^3.8.3" 在我 package.json. 而这是我的 tsconfig.json 看起来像。

{
  "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"]
}

任何帮助，这将是非常感激的。

Answer 1

似乎typeScript没有在WebStorm中拾取定义。src/global.d.ts，尝试在输入根文件夹时添加src文件夹。tsconfig.json，并重新启动排版稿。

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

更多细节。@types, typeRoots 和 types