PhpStorm中Sass @import继承类名在TSX文件无代码提示如何修复

不需要切换为普通CSS文件，这个问题是PhpStorm对Sass CSS Module的解析配置+旧语法兼容问题，按以下步骤操作即可解决：

• 首先检查文件关联配置：打开Settings > Editor > File Types，找到Sass文件类型，确认.module.sass后缀在关联列表中，没有被其他文件类型规则误抢占
• 再调整CSS Modules配置：进入Settings > Languages & Frameworks > Style Sheets > CSS Modules，勾选「Enable CSS Modules support for files with .module extension」，在Additional CSS Modules file extensions列表中添加module.sass
• 针对代码中使用的@/路径别名，需要在项目根目录的tsconfig.json（TS项目）或jsconfig.json（JS项目）中补充路径映射，让IDE能正确解析别名对应的真实文件路径：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

• 所有配置改完后，点击菜单栏File > Invalidate Caches...，勾选清除文件系统缓存选项，重启IDE让配置生效。

如果改完配置还是有提示缺失，把Sass文件里的旧@import语法换成官方推荐的新语法即可：你现在用的@import已经被Sass官方标记为废弃，PhpStorm对这个旧语法的跨文件类名解析支持本身就有缺陷。把other.module.sass里的导入语句改成下面的写法：

@use "./common.module" as *

// 保留原有其他样式代码

这里的as *表示把common文件里的所有类名直接合并到当前文件的作用域，和原来@import的行为完全一致，不需要修改TSX代码里的类名引用逻辑，改完之后IDE就能正常识别所有导入的类名，同时支持错误类名检查。

另外你当前用的PhpStorm 2022.1版本本身存在几个Sass CSS Module跨文件解析的已知bug，如果上述操作做完还是有问题，升级到2022.3及以上版本即可，这类解析问题在后续版本已经修复。

普通CSS能正常提示只是因为IDE对原生CSS的解析逻辑更成熟，这个问题不是Sass本身的缺陷，完全没必要为了代码提示放弃Sass的嵌套、变量、混入等实用特性。

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