Webstorm+TypeScript 无法解析 CRA 项目中的 SCSS 模块（错误 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 没有获取 中的定义src/global.d.ts，尝试将 src 文件夹添加为 中的打字根文件夹tsconfig.json，然后重新启动 typescript。

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

更多详细信息：@types、typeRoots 和 types