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

Webstorm+;TypeScript无法解析CRA项目中的SCSS模块(错误TS2339),typescript,webstorm,create-react-app,Typescript,Webstorm,Create React App,我有一个createreact应用程序项目,目前正在从FlowJS迁移到TypeScript。当我将TypeScript集成到项目中时,WebStorm中出现的一个问题是TypeScript似乎无法解析来自SCSS模块导入的任何键。我总是受到以下方面的欢迎: 我的顶级样式导入是:从“/\u styles.module.scss”导入样式 为了解决这个问题,我做了大量的研究/挖掘,创建了一个src/global.d.ts文件,其中包含以下内容: declare module '*.scss' {

我有一个createreact应用程序项目,目前正在从FlowJS迁移到TypeScript。当我将TypeScript集成到项目中时,WebStorm中出现的一个问题是TypeScript似乎无法解析来自SCSS模块导入的任何键。我总是受到以下方面的欢迎:

我的顶级样式导入是:
从“/\u styles.module.scss”导入样式

为了解决这个问题,我做了大量的研究/挖掘,创建了一个
src/global.d.ts
文件,其中包含以下内容:

declare module '*.scss' {
  const content: {
    [className: string]: string;
  }
  export = content
}
尽管定义了上述模块,使缓存失效并重新启动WebStorm,但问题仍然存在——我不再知道要解决这个问题还需要尝试什么

我的TypeScript版本设置为
“TypeScript”:“^3.8.3”
,在我的
包.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"]
}

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

似乎typescript没有选择
src/global.d.ts
中的定义,尝试将src文件夹添加为
tsconfig.json
中的键入根文件夹,然后重新启动typescript

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

更多详细信息:

似乎typescript没有获取
src/global.d.ts
中的定义,尝试将src文件夹添加为
tsconfig.json
中的键入根文件夹,然后重新启动typescript

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

更多详细信息:

我不太喜欢您将
src/
dir声明为
typeRoot
的建议。如果您运行
tsc--p tsconfig.json--listFiles
,是否列出了您的global.d.ts?@DavidBarker是的,它在我运行该命令时列出。好的,那么这不是类型脚本问题,可能特定于Webstorm。如果打开底部的typescript选项卡,左侧(顶部)有一个按钮,允许您使用特定的tsconfig.json重新编译项目。我会试试,如果不行,我会重新启动typescript服务。您的项目中有多少
tsconfig.*.json
文件?报告问题的文件是否包含在任何文件中?@DavidBarker噢,我的天哪,它已修复!!!原来是
typescript插件css模块
导致了我的问题!我从我的
tsconfig.json
中删除了它,并卸载了该包,WebStorm不再抱怨我的关键引用!我甚至不需要安装
@types/node-sass
。哦,老兄,我太高兴了!!我不太喜欢您将
src/
dir声明为
typeRoot
的建议。如果您运行
tsc--p tsconfig.json--listFiles
,是否列出了您的global.d.ts?@DavidBarker是的,它在我运行该命令时列出。好的,那么这不是类型脚本问题,可能特定于Webstorm。如果打开底部的typescript选项卡,左侧(顶部)有一个按钮,允许您使用特定的tsconfig.json重新编译项目。我会试试,如果不行,我会重新启动typescript服务。您的项目中有多少
tsconfig.*.json
文件?报告问题的文件是否包含在任何文件中?@DavidBarker噢,我的天哪,它已修复!!!原来是
typescript插件css模块
导致了我的问题!我从我的
tsconfig.json
中删除了它,并卸载了该包,WebStorm不再抱怨我的关键引用!我甚至不需要安装
@types/node-sass
。哦,老兄,我太高兴了!!刚刚添加了这个,无效缓存并重新启动WebStorm--不幸的是,它没有工作。Typescript正在识别您的文件,删除这个,它不是必需的。刚刚添加了这个,无效缓存并重新启动WebStorm--不幸的是,它没有工作。Typescript正在识别您的文件,删除这个,它不是必需的。