PhpStorm中PUG类名无法跳转至SCSS样式定义的解决方法问询

核心配置步骤 #

• 确保SCSS文件被正确识别：
  打开File > Settings > Languages & Frameworks > Stylesheets > SCSS，检查你的SCSS文件是否被标记为SCSS类型。若显示为纯文本，右键文件选择Mark as > SCSS File即可。
• 标记SCSS目录为资源根：
  右键存放SCSS文件的文件夹，选择Mark Directory as > Resource Root，让PhpStorm将该目录纳入索引范围。
• 配置CSS类导航范围：
  进入File > Settings > Editor > General > CSS，在「CSS class navigation」区域，勾选「Search in whole project」，或手动指定包含SCSS文件的目录，确保编辑器扫描所有样式文件。
• 重建项目索引：
  执行File > Invalidate Caches...，选择「Invalidate and Restart」，重启后PhpStorm会重新生成项目索引，解决索引过期导致的跳转失效问题。
• 校验类名一致性：
  确认PUG中的类名（如text-white-75）与SCSS中的选择器（.text-white-75 {}）完全一致，注意大小写和拼写，PhpStorm对类名字符匹配是严格敏感的。

额外排查项 #

• 若SCSS使用动态生成的类名（如通过变量拼接$color: white; .text-#{$color}-75 {}），PhpStorm无法识别这类动态选择器，需改为静态定义的类名才能支持跳转。
• 检查目录排除设置：进入File > Settings > Directories，确认SCSS文件夹未被勾选「Excluded」，否则会被排除在索引之外，导致无法找到样式定义。

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