WebStorm无法在React应用的SCSS文件中找到相对路径，并显示以下错误。
导入工作正常，但WebStorm无法识别相对路径并显示这些错误。
应用程序是用cra创建的，baseUrl: src包含在tsconfig文件中，所以一切正常，但错误仍然存在，路径的自动完成功能不起作用。

Cannot resolve directory 'styles'
Cannot resolve file 'variaveis'
Cannot resolve directory 'assets'
Cannot resolve directory 'cardapio'
Cannot resolve file 'header.png'
Element 'padding-horizontal' is resolved only by name without use of explicit imports
Element 'padding-horizontal' is resolved only by name without use of explicit imports

Cardapio.模块.scss

@import "styles/variaveis";

.menu {
  padding: 20px $padding-horizontal;
}

.header {
  background-image: url('/assets/cardapio/header.png');
  background-size: cover;
  background-repeat: no-repeat;
  height: 300px;
}

我希望WebStorm能够识别相对路径并使自动完成功能正常工作。
现在我所做的是禁用检查，只是为了摆脱消息。
下面是我的tsconfig文件和错误。

系统配置json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

是否需要在tsconfig、package.json甚至WebStorm中进行一些配置？