Webstorm + TypeScript无法解析CRA项目中的SCSS模块

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，问题仍然存在-我不再知道要解决该问题的其他方法。

我的T​​ypeScript版本在我的"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

似乎像打字稿没有在src/global.d.ts中定义，尝试在src文件夹中添加tsconfig.json中的键入根文件夹，然后重新启动打字稿。

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

更多详细信息：@types, typeRoots and types