WebStorm识别React项目SCSS相对路径报错，如何解决？

以下几种配置方式可解决WebStorm无法识别SCSS文件中路径、变量的问题，同时恢复自动补全功能：

1. 配置WebStorm的SCSS路径映射 #

WebStorm对SCSS的路径解析不会自动沿用tsconfig的baseUrl，需单独设置：

• 打开WebStorm设置（快捷键Ctrl+Alt+S，或通过File > Settings）
• 导航到Languages & Frameworks > Style Sheets > SCSS
• 在Imports区域点击Add，新增路径映射：
  • 名称填写~（通用SCSS路径别名前缀）
  • 路径选择项目根目录下的src文件夹
• 保存设置后重启WebStorm，路径识别和自动补全即可恢复

2. 在package.json中添加Sass路径配置 #

Create React App支持通过package.json指定Sass的搜索路径，WebStorm会读取该配置：
在package.json根节点添加如下配置：

"sassOptions": {
  "includePaths": ["./src"]
}

该配置会同时被CRA编译流程和WebStorm识别，统一路径解析规则。

3. 补充tsconfig.json的paths配置（辅助强化） #

虽已设置baseUrl，补充paths配置可让WebStorm的全局路径识别更清晰：
在tsconfig.json的compilerOptions中添加：

"paths": {
  "*": ["*"]
}

此配置主要优化TypeScript文件的导入体验，配合前两个方案能进一步提升SCSS路径识别准确性。

针对SCSS变量未识别的处理 #

对于$padding-horizontal提示“仅通过名称解析”的问题：

• 确认styles/variaveis.scss文件无语法错误，变量定义正常
• 打开WebStorm设置，导航到Editor > Inspections > CSS > Unknown CSS property，调整该检查级别（比如设为警告或禁用），避免把SCSS变量误判为未知CSS属性

内容的提问来源于stack exchange，提问作者Gabriel Pereira