如何配置WebStorm识别CSS Modules+SASS中的kebab-case类名

我太懂这个矛盾了——一边要靠WebStorm的类名检查帮你揪出SCSS里真的缺失的类，另一边又要忍受它因为css-loader的kebab-case转camelCase行为而抛出的误报警告。别担心，有几个针对性的配置方案可以解决这个问题：

方案1：启用WebStorm的CSS Modules支持（最推荐） #

因为你的css-loader转换类名的逻辑和CSS Modules的命名规则高度契合，开启这个支持后，WebStorm会自动识别kebab-case到camelCase的映射：

• 打开WebStorm设置（快捷键Ctrl+Alt+S，或者顶部菜单File > Settings）
• 导航到Languages & Frameworks > Style Sheets > CSS Modules
• 勾选Enable CSS Modules support
• 在Class name format下拉框选择camelCase（和你JSX里的写法对应）
• 确保你的SCSS文件被WebStorm识别为样式表：右键SCSS文件 → Mark as > Stylesheet

配置完成后，当你在JSX里写className={styles.userProfile}，WebStorm会自动关联SCSS里的.user-profile类，不会再报警告；但如果你写错成styles.userProfil（少了最后一个e），它依然会正常警告你类名缺失，完美保留了检查的价值。

方案2：自定义类名映射（适合不用CSS Modules的场景） #

如果你的项目没用到CSS Modules，也可以通过自定义映射让WebStorm识别类名对应关系：

• 打开设置里的Editor > Inspections > CSS > Unknown CSS class
• 点击右侧的Options按钮，找到Custom mappings区域
• 点击+号添加映射：比如输入SCSS里的类名.user-profile，对应JSX里的userProfile
• 保存配置后，WebStorm就会把这两个类名视为匹配，不再误报

不过这个方法需要手动维护所有类名映射，适合类名不多的小型项目，大型项目还是方案1更高效。

方案3：用注释临时标记合法类名（应急用） #

如果只是个别类名的误报，不想改全局配置，可以在JSX里用注释告诉WebStorm这个类是合法的：

/* css-class: user-profile */
<div className="userProfile"></div>

这种方式适合临时处理零散的警告，但不适合大规模使用。

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