PhpStorm在Vue中误将JS引用的CSS选择器标记为未使用

升级到Tailwind 4并弃用SASS时，我移除了.vue文件中<style scoped>标签的lang=scss属性。之后发现，仅在JS中引用的CSS选择器不再被IDE识别为“已使用”——这个问题其实在切换到Tailwind 4之前就存在了。想请教这可能和PhpStorm/WebStorm设置、Vite配置、Vue还是其他因素有关？

我已经检查过以下PhpStorm设置：

• Languages & Frameworks > Style Sheets
• Editor > Inspections > CSS > Unused selectors（不想关闭这个检查）

最小代码示例 #

<script setup lang="ts">
const {
  size = 'sm',
} = defineProps<{
  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl',
}>()
</script>

<template>
  <span :class="[size]" class="icon" />
</template>

<style scoped>
.sm { /* <-- 移除scss编译引用后被标记为未使用（灰色显示） */
  height: 16px;
  width: 16px;

  &.icon { /* <-- 仍被标记为已使用，推测因在HTML中直接引用 */
    font-size: 10px;
  }
}
</style>

可能的原因及解决方向 #

1. IDE的CSS分析逻辑限制
   PhpStorm/WebStorm对Vue文件中CSS选择器的使用检测，在处理纯CSS的<style scoped>时，通常只能识别模板里静态写死的类名，没法追踪JS/TS中动态绑定的类（比如通过size变量传递的sm）。之前用SCSS时，IDE可能依赖预处理器的语法解析逻辑，间接关联到了这些选择器，或者有额外的配置支持了动态类的检测。

2. Vue Scoped CSS的IDE解析差异
   虽然移除lang=scss不影响Scoped CSS的实际功能，但IDE可能依赖预处理器的解析器来更好地关联模板和样式。纯CSS模式下，IDE的关联逻辑更简单，无法深入分析JS中的动态绑定。

3. Vite配置的间接影响
   如果Vite中配置了PostCSS等CSS优化插件，可能改变IDE对CSS文件的解析方式，但这种情况概率较低，核心问题还是IDE自身的检测逻辑。

可行的解决办法 #

• 给动态类添加IDE注释标记
  在CSS选择器上方添加/* used */注释，强制让IDE认为该选择器已被使用：

/* used */
.sm {
  height: 16px;
  width: 16px;
  &.icon {
    font-size: 10px;
  }
}

• 更新Vue相关插件
  检查PhpStorm/WebStorm插件市场，确保Vue.js官方插件是最新版本，部分插件更新会优化CSS选择器的检测逻辑。
• 调整IDE检测规则
  在Editor > Inspections > CSS > Unused selectors设置中，针对Vue文件单独配置检测范围，或者排除动态类所在的样式块（需权衡精准度）。
• 临时保留lang=scss
  如果没有完全弃用SCSS的必要，可以保留lang=scss属性（即使样式写纯CSS），让IDE回到之前的解析逻辑，解决标记问题。

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