Webstorm+TypeScript 无法解析 CRA 项目中的 SCSS 模块（错误 TS2339）答案

【问题标题】：Webstorm+TypeScript cannot resolve SCSS modules in CRA project (Error TS2339)Webstorm+TypeScript 无法解析 CRA 项目中的 SCSS 模块（错误 TS2339）
【发布时间】：2020-05-21 14:44:41
【问题描述】：

我有一个 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 版本在我的 package.json 中设置为 "typescript": "^3.8.3"。这就是我的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"]
}

对此的任何帮助将不胜感激。

【问题讨论】：

我不太赞成您将src/ 目录声明为typeRoot 的建议。如果您运行tsc --p tsconfig.json --listFiles，您的 global.d.ts 是否已列出？
@DavidBarker 是的，它在我运行该命令时已列出。
好吧，这不是打字稿问题，可能是 Webstorm 特有的。如果您打开底部的 typescript 选项卡，左侧（顶部）有一个按钮，可让您使用特定的 tsconfig.json 重新编译项目。我会尝试，如果这不起作用，我会重新启动 typescript 服务。
您的项目中有多少个tsconfig.*.json 文件？报告问题的文件是否包含在其中任何一个文件中？
@DavidBarker 天哪——它已经修复了！！！原来typescript-plugin-css-modules 是我问题的罪魁祸首！我去把它从我的tsconfig.json 中删除并卸载了包，WebStorm 不再抱怨我的关键参考！我什至不必安装@types/node-sass。哦，伙计，我很高兴！

标签： typescript webstorm create-react-app

【解决方案1】：

好像typescript没有提取src/global.d.ts中的定义，尝试将src文件夹添加为tsconfig.json中的打字根文件夹，然后重新启动typescript。

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

更多详情：@types, typeRoots and types

【讨论】：

刚刚添加了这个，使缓存失效并重新启动了 WebStorm -- 不幸的是它没有工作。
Typescript 正在识别您的文件，删除它，不需要它。