WebStorm无法解析SCSS子文件夹相对路径，但编译及其他IDE正常

问题现象 #

在非CSS模块的.scss文件中导入其他非模块SCSS文件时，WebStorm弹出路径无法解析警告，但实际编译无问题，具体表现：

• 可正常解析同目录下的相对路径（如 @import "style.scss"），但无法识别子文件夹中的路径（如 @import "sub/style.scss"）
• VS Code等其他IDE可正常解析该路径
• npm build或npm start能成功完成编译
• 添加./前缀（如 @import "./sub/style.scss"）后，WebStorm可识别路径，但sass-loader文档明确两种写法功能等效

解决方法 #

1. 配置WebStorm的SCSS导入目录
   打开WebStorm设置（Windows/Linux：File → Settings；Mac：WebStorm → Settings），导航到Languages & Frameworks → Stylesheets → Sass，在Additional import directories中添加包含子文件夹的父目录，让WebStorm能识别该目录下的相对路径。

2. 关联Webpack配置文件
   打开Settings → Languages & Frameworks → JavaScript → Webpack，选择项目的webpack.config.js，让WebStorm直接复用Webpack的路径解析逻辑，和编译时的规则保持一致，从根源解决解析差异问题。

3. 统一添加./前缀
   虽然sass-loader说明两种写法等效，但添加./前缀可让WebStorm的解析逻辑与编译逻辑对齐，不会影响编译结果，同时快速消除警告。

原因分析 #

WebStorm的SCSS路径解析默认逻辑与sass-loader存在差异：

• sass-loader会将不带./的相对路径优先视为当前文件所在目录的相对路径进行查找
• WebStorm默认将不带前缀的路径识别为全局模块路径（优先去node_modules或配置的全局样式目录查找），因此子文件夹的路径会被误判，触发警告。VS Code依赖的解析逻辑与sass-loader更一致，因此能正常识别。

内容的提问来源于stack exchange，提问作者Sergey Komarov